WPF更改禁用按钮的背景

时间:2014-11-20 19:39:11

标签: wpf xaml

我正在尝试学习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>

1 个答案:

答案 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}}(NormalMouseOverPressed &amp; Disabled)。这允许我在Button处于其中一种状态时自定义外观。在此示例中,我使用了visual states,以便为Button State转换设置动画。

四个State的样式采用相似的格式(动画渐变背景和动画实体边框),这些状态之间的差异是它们用来提供所需效果的颜色和持续时间。

在我更改主要内容模板VisualState之后,我希望如何呈现Button控件。我提供ContentPresenter,用于显示Button的内容,我将ContentPresenter的某些特征绑定到Button正在模板,允许这些特征如果需要,可以按Button进行控制。 ContentPresenterBorder包围,BrBrush定义了BgBrush(边框画笔)和VisualStates(背景画笔)。这些是ControlTemplate.Triggers模板中引用的相同画笔,并提供了一个默认状态,供它们使用。

最后,我更改Button,根据激活的{Property Value自定义Trigger(此示例中的前景颜色)的视觉样式1}}。