我正在尝试学习WPF并且我已经制作了一个简单的Tic Tac Toe应用程序。该应用程序有效,但我试图设置它的样式。我无法找到如何为所有按钮设置按钮禁用背景(并保持内容可见)。我的问题是如何在资源字典中设置代码?评论的代码是我尝试过的。为了给所有按钮提供相同的样式,我添加了一个资源字典。
资源字典
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<!--<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding Path=SelectedDate,
StringFormat={}{0:d},
RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Center" HorizontalAlignment="Left"
Padding="4,0,0,0" />
</Border>-->
<!--<Border BorderBrush="Aquamarine" BorderThickness="1"></Border>-->
<!-- Outer Rectangle with rounded corners. -->
<!-- Present Content (text) of the button. -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
的App.xaml
<Application x:Class="FirstApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary Source="ResourceDictionary.xaml" />
</Application.Resources>
</Application>
MainWindow.xaml
<Window x:Class="FirstApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="525">
<Grid Margin="0,0,0.4,-19.2" Name="controlGrid">
<Button x:Name="A" Content="" HorizontalAlignment="Left" Margin="117,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="B" Content="" HorizontalAlignment="Left" Margin="223,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="C" Content="" HorizontalAlignment="Left" Margin="330,59,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="D" Content="" HorizontalAlignment="Left" Margin="117,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" RenderTransformOrigin="0.302,0.614" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="E" Content="" HorizontalAlignment="Left" Margin="223,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="F" Content="" HorizontalAlignment="Left" Margin="330,157,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="G" Content="" HorizontalAlignment="Left" Margin="117,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="H" Content="" HorizontalAlignment="Left" Margin="223,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<Button x:Name="I" Content="" HorizontalAlignment="Left" Margin="330,255,0,0" VerticalAlignment="Top" Width="75" Height="75" Click="button_click" Background="#FFEBEB33" MouseEnter="button_enter" MouseLeave="button_leave" FontSize="36"/>
<ToolBar Margin="0,0,0,450.6">
<Button Name="newButton" Click="newButton_Click">New</Button>
</ToolBar>
</Grid>
</Window>
答案 0 :(得分:1)
可能比你想要的更多:
<Style TargetType="{x:Type Button}" x:Key="ButtonBase">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="#FF959595" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10,0" />
<Setter Property="Margin" Value="2" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Height" Value="25" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation To="#FFFFFFFF" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0:0:0.07" />
<ColorAnimation To="#FFDEDEDE" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0:0:0.07" />
<ColorAnimation To="#FF959595" Storyboard.TargetName="BrBrush"
Storyboard.TargetProperty="Color" Duration="0:0:0.07" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation To="#FF00B4E4" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0:0:0.07" />
<ColorAnimation To="#FF0083C3" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0:0:0.07" />
<ColorAnimation To="#FF4C7B8F" Storyboard.TargetName="BrBrush"
Storyboard.TargetProperty="Color" Duration="0:0:0.07" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation To="#DBEDFD" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0:0:0.05" />
<ColorAnimation To="#C4E0FC" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0:0:0.05" />
<ColorAnimation To="#4C7B8F" Storyboard.TargetName="BrBrush"
Storyboard.TargetProperty="Color" Duration="0:0:0.05" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation To="#EFEFEF" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0:0:0" />
<ColorAnimation To="#EFEFEF" Storyboard.TargetName="BgBrush"
Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="0:0:0" />
<ColorAnimation To="#D9D9D9" Storyboard.TargetName="BrBrush"
Storyboard.TargetProperty="Color" Duration="0:0:0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Chrome" BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<Border.BorderBrush>
<SolidColorBrush x:Name="BrBrush" Color="#ACACAC" />
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush x:Name="BgBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF0F0F0" Offset="0" />
<GradientStop Color="#FFE5E5E5" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="#FFFFFF" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Foreground" Value="#000000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
根据King King的评论/反馈进行修改
上述示例肯定比OP要求的更多,但是,考虑到问题的背景以及他们对Button
控制State
样式的兴趣,我认为提供更多细节是有利的(尽管如此)无可置疑地解释。)
在<Setter Property="Tempalte">
之前,我正在改变Button
控制的基本视觉风格。我希望这一切都不需要解释,因为它似乎是相当自我解释的。
发布<Setter Property="Template">
我正在改变Button
ControlTemplate
的{{3}}(Normal
,MouseOver
,Pressed
&amp; Disabled
)。这允许我在Button
处于其中一种状态时自定义外观。在此示例中,我使用了visual states,以便为Button
State
转换设置动画。
四个State
的样式采用相似的格式(动画渐变背景和动画实体边框),这些状态之间的差异是它们用来提供所需效果的颜色和持续时间。
在我更改主要内容模板VisualState
之后,我希望如何呈现Button
控件。我提供ContentPresenter
,用于显示Button
的内容,我将ContentPresenter
的某些特征绑定到Button
正在模板,允许这些特征如果需要,可以按Button
进行控制。 ContentPresenter
被Border
包围,BrBrush
定义了BgBrush
(边框画笔)和VisualStates
(背景画笔)。这些是ControlTemplate.Triggers
模板中引用的相同画笔,并提供了一个默认状态,供它们使用。
最后,我更改Button
,根据激活的{Property
Value
自定义Trigger
(此示例中的前景颜色)的视觉样式1}}。