Question

我正在尝试用模板来理解样式控件的基础知识，但即使有很多样本我仍然坚持一些基础知识。

我想设置一个带有自定义背景的按钮，因此我在VisualState“MouseOver”上设置了一个背景属性更改的边框。问题是，因为我在边框上设置颜色，我找不到如何将文本前景属性设置为白色，以便文本可见。

这是我的xaml：

   <Style TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="RootElement">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Offset="0" Color="Black" />
                                <GradientStop Offset="1" Color="SteelBlue" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Foreground属性的setter似乎被边框背景属性覆盖。

我想我必须在模板中添加一个文本块，但我确定如何将按钮的实际文本链接到textBlock，这是我尝试过的，没有成功：

    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="RootElement">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Offset="0" Color="Black" />
                                <GradientStop Offset="1" Color="SteelBlue" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <TextBlock Name="ButtonText" Text="{TemplateBinding Content}">
                            <TextBlock.Foreground>
                                <SolidColorBrush Color="White"/>
                            </TextBlock.Foreground>
                        </TextBlock>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

你是正确的，你需要添加一些东西来呈现Button中的文本，边框内的一个简单的ContentPrsenter应该这样做。

   <Style TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="RootElement">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <GradientStop Offset="0" Color="Black" />
                                    <GradientStop Offset="1" Color="SteelBlue" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <ContentPresenter/>

                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

如果您想要更多地控制显示内容的内容，您可以添加类似Label的内容并绑定到按钮的Content属性。

  <Style TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="RootElement">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Offset="0" Color="Black" />
                                <GradientStop Offset="1" Color="SteelBlue" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="LightSteelBlue" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Label Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

WPF按钮样式背景隐藏前景

1 个答案: