Если вы планируете настроить внешний вид Button
, вам необходимо использовать ContentPresenter
для отображения содержимого при установке ControlTemplate
.
. Следует указать, что Storyboard
inside Style
не может влиять на другие элементы управления. Например, внутренний Storyboard
из btn1
может изменять только свой собственный цвет и не может изменять цвет внешних btn2
и btn3
. Если вы хотите изменить цвет всех кнопок при наведении курсора, вам нужно использовать Code-behind и прослушивать событие Button.PointerEntered
, или вы можете использовать VisualStateManager
на уровне страницы.
Этополный шаблон пользовательского элемента управления Button, который можно использовать в качестве справочного материала
<Style x:Key="PrimaryButtonStyle" TargetType="Button">
<Setter Property="Background" Value="#3D8DEB"/>
<Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="10,5"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="FocusVisualMargin" Value="-3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BackgroundSizing="{TemplateBinding BackgroundSizing}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame Value="Red"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#25326E"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Если у вас есть ContentPresenter
, ваш элемент управления будет отображаться.
Если вы хотитеизменить цвет других кнопок во время наведения мыши, это может быть сложно, я предлагаю вам понять это знание:
Вот код для этого:
ButtonsPage.xaml
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualStateGroup.States>
<VisualState>
<VisualState.StateTriggers>
<StateTrigger IsActive="{x:Bind IsHover, Mode=OneWay}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="btn1.Background" Value="#25326E"/>
<Setter Target="btn2.Background" Value="#25326E"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup.States>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Button Content="First" x:Name="btn1"/>
<Button Content="Second" x:Name="btn2"/>
<Button Content="Third" x:Name="btn3" PointerEntered="btn3_PointerEntered" PointerExited="btn3_PointerExited"
Style="{StaticResource PrimaryButtonStyle}"/>
</StackPanel>
ButtonsPage.xaml.cs
public sealed partial class ButtonsPage : Page, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnProeprtyChnaged([CallerMemberName]string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private bool _isHover;
public bool IsHover
{
get => _isHover;
set
{
_isHover = value;
OnProeprtyChnaged();
}
}
public ButtonsPage()
{
this.InitializeComponent();
}
private void btn3_PointerEntered(object sender, PointerRoutedEventArgs e)
{
IsHover = true;
}
private void btn3_PointerExited(object sender, PointerRoutedEventArgs e)
{
IsHover = false;
}
}