首页 文章

WPF按钮样式背景隐藏前景

提问于
浏览 次
0

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

我想设置一个带有自定义背景的按钮，因此我设置了一个边框，其背景属性在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”>
<故事板>
<ColorAnimationUsingKeyFrames Storyboard.TargetName =“RootElement”Storyboard.TargetProperty =“（Border.Background） . （GradientBrush.GradientStops）[1] . （GradientStop.Color）”>
<EasingColorKeyFrame KeyTime =“0”Value =“LightSteelBlue”/>
</ ColorAnimationUsingKeyFrames>
</故事板>
</的VisualState>
</ VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</边框>
</的ControlTemplate>
</Setter.Value>
</二传手>
</样式>

前景属性的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”> <故事板> <ColorAnimationUsingKeyFrames Storyboard.TargetName =“RootElement”Storyboard.TargetProperty =“（Border.Background） . （GradientBrush.GradientStops）[1] . （GradientStop.Color）”> <EasingColorKeyFrame KeyTime =“0”Value =“LightSteelBlue”/> </ ColorAnimationUsingKeyFrames> </故事板> </的VisualState> </ VisualStateGroup> </VisualStateManager.VisualStateGroups> <TextBlock Name =“ButtonText”Text =“{TemplateBinding Content}”> <TextBlock.Foreground> <SolidColorBrush Color =“White”/> </TextBlock.Foreground> </ TextBlock的> </边框> </的ControlTemplate> </Setter.Value> </二传手> </样式>

wpf templates foreground

1 回答

  • 0

    你是正确的，你需要添加一些东西来呈现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>
    回复于

相关问题