Другой цвет рамки для кнопки в UWP с использованием стиля шаблона

#uwp #uwp-xaml

Вопрос:

Мне нужны разные цвета границ для кнопки в uwp.Это нужно сделать в шаблоне,как показано ниже, никакое свойство стиля не может быть применено.В приведенном ниже отрывке кода применяется синий цвет, подобный цвету границы.Мне нужно применить другой цвет для остальных границ.Это некоторая настройка,такая как borderrightbrush, borderleftbrush вместо общей пограничной кисти, которая применяется ко всей границе

 `lt;Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}" gt;  lt;Setter Property="Background" Value="White" /gt;   lt;Setter Property="Foreground" Value="#3272B2" /gt;  lt;Setter Property="BorderBrush" Value="#155EA8" /gt;  lt;Setter Property="BorderThickness" Value="0,0,0,2" /gt;`  

Ответ №1:

Вы можете определить пользовательский шаблон, в котором вы разместите Border ContentPresenter :

 lt;Button Content="Button"gt;  lt;Button.Stylegt;  lt;Style TargetType="Button"gt;  lt;Setter Property="Background" Value="White" /gt;  lt;Setter Property="Foreground" Value="#3272B2" /gt;  lt;Setter Property="BorderBrush" Value="#155EA8" /gt;  lt;Setter Property="BorderThickness" Value="0,0,0,2" /gt;  lt;Setter Property="BackgroundSizing" Value="OuterBorderEdge" /gt;  lt;Setter Property="Padding" Value="{StaticResource ButtonPadding}" /gt;  lt;Setter Property="HorizontalAlignment" Value="Left" /gt;  lt;Setter Property="VerticalAlignment" Value="Center" /gt;  lt;Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /gt;  lt;Setter Property="FontWeight" Value="Normal" /gt;  lt;Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /gt;  lt;Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" /gt;  lt;Setter Property="FocusVisualMargin" Value="-3" /gt;  lt;Setter Property="Template"gt;  lt;Setter.Valuegt;  lt;ControlTemplate TargetType="Button"gt;  lt;Border BorderThickness="2,2,2,0" BorderBrush="Red"gt;  lt;ContentPresenter x:Name="ContentPresenter"  Background="{TemplateBinding Background}"  BackgroundSizing="{TemplateBinding BackgroundSizing}"  BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}"  Content="{TemplateBinding Content}"  ContentTemplate="{TemplateBinding ContentTemplate}"  ContentTransitions="{TemplateBinding ContentTransitions}"  CornerRadius="{TemplateBinding CornerRadius}"  Padding="{TemplateBinding Padding}"  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"  AutomationProperties.AccessibilityView="Raw"gt;   lt;VisualStateManager.VisualStateGroupsgt;  lt;VisualStateGroup x:Name="CommonStates"gt;  lt;VisualState x:Name="Normal"gt;  lt;Storyboardgt;  lt;PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /gt;  lt;/Storyboardgt;  lt;/VisualStategt;  lt;VisualState x:Name="PointerOver"gt;  lt;Storyboardgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /gt;  lt;/Storyboardgt;  lt;/VisualStategt;  lt;VisualState x:Name="Pressed"gt;  lt;Storyboardgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter" /gt;  lt;/Storyboardgt;  lt;/VisualStategt;  lt;VisualState x:Name="Disabled"gt;  lt;Storyboardgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;/Storyboardgt;  lt;/VisualStategt;  lt;/VisualStateGroupgt;  lt;/VisualStateManager.VisualStateGroupsgt;  lt;/ContentPresentergt;  lt;/Bordergt;  lt;/ControlTemplategt;  lt;/Setter.Valuegt;  lt;/Settergt;  lt;/Stylegt;  lt;/Button.Stylegt; lt;/Buttongt;  

введите описание изображения здесь

Если вам нужны другие цвета, вы можете, например, использовать Grid :

 lt;Button Content="Button"gt;  lt;Button.Stylegt;  lt;Style TargetType="Button"gt;  lt;Setter Property="Background" Value="White" /gt;  lt;Setter Property="Foreground" Value="#3272B2" /gt;  lt;Setter Property="BorderThickness" Value="0" /gt;  lt;Setter Property="BackgroundSizing" Value="OuterBorderEdge" /gt;  lt;Setter Property="Padding" Value="{StaticResource ButtonPadding}" /gt;  lt;Setter Property="HorizontalAlignment" Value="Left" /gt;  lt;Setter Property="VerticalAlignment" Value="Center" /gt;  lt;Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /gt;  lt;Setter Property="FontWeight" Value="Normal" /gt;  lt;Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /gt;  lt;Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" /gt;  lt;Setter Property="FocusVisualMargin" Value="-3" /gt;  lt;Setter Property="Template"gt;  lt;Setter.Valuegt;  lt;ControlTemplate TargetType="Button"gt;  lt;Gridgt;  lt;Grid.ColumnDefinitionsgt;  lt;ColumnDefinition Width="2" /gt;  lt;ColumnDefinition Width="*" /gt;  lt;ColumnDefinition Width="2" /gt;  lt;/Grid.ColumnDefinitionsgt;  lt;Grid.RowDefinitionsgt;  lt;RowDefinition Height="2" /gt;  lt;RowDefinition Height="*" /gt;  lt;RowDefinition Height="2" /gt;  lt;/Grid.RowDefinitionsgt;  lt;Grid Grid.RowSpan="3" Background="Yellow" /gt;  lt;Grid Grid.Column="2" Grid.RowSpan="3" Background="Green" /gt;  lt;Grid Grid.ColumnSpan="3" Background="Red" /gt;  lt;Grid Grid.Row="2" Grid.ColumnSpan="3" Background="#155EA8" /gt;  lt;ContentPresenter Grid.Column="1" Grid.Row="1" x:Name="ContentPresenter"  Background="{TemplateBinding Background}"  BackgroundSizing="{TemplateBinding BackgroundSizing}"  BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}"  Content="{TemplateBinding Content}"  ContentTemplate="{TemplateBinding ContentTemplate}"  ContentTransitions="{TemplateBinding ContentTransitions}"  CornerRadius="{TemplateBinding CornerRadius}"  Padding="{TemplateBinding Padding}"  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"  AutomationProperties.AccessibilityView="Raw"gt;   lt;VisualStateManager.VisualStateGroupsgt;  lt;VisualStateGroup x:Name="CommonStates"gt;  lt;VisualState x:Name="Normal"gt;  lt;Storyboardgt;  lt;PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /gt;  lt;/Storyboardgt;  lt;/VisualStategt;  lt;VisualState x:Name="PointerOver"gt;  lt;Storyboardgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /gt;  lt;/Storyboardgt;  lt;/VisualStategt;  lt;VisualState x:Name="Pressed"gt;  lt;Storyboardgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter" /gt;  lt;/Storyboardgt;  lt;/VisualStategt;  lt;VisualState x:Name="Disabled"gt;  lt;Storyboardgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"gt;  lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" /gt;  lt;/ObjectAnimationUsingKeyFramesgt;  lt;/Storyboardgt;  lt;/VisualStategt;  lt;/VisualStateGroupgt;  lt;/VisualStateManager.VisualStateGroupsgt;  lt;/ContentPresentergt;  lt;/Gridgt;  lt;/ControlTemplategt;  lt;/Setter.Valuegt;  lt;/Settergt;  lt;/Stylegt;  lt;/Button.Stylegt; lt;/Buttongt;  

введите описание изображения здесь