如何在按钮内获得一个矩形以在悬停时更改颜色?

时间:2018-09-06 11:18:49

标签: c# wpf xaml

如何在按钮内部获取一个rectactangle来翻转颜色 在悬停时,我似乎需要不在其中的'fill'属性 按钮。

这就是我想要的:

Image of buttons that are needed

看到悬停按钮底部的蓝色矩形,我需要 从按钮颜色变为蓝色。

我已经尝试过:

<Style TargetType="{x:Type Button}" x:Key="MenuButton">
                    <Setter Property="Background" Value="#d8d8d8" />
                    <Setter Property="Foreground" Value="Black" />

                    <Setter Property="anything" Value="Blue" />

                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">

                                    <!-- Inner Rectangle with rounded corners. -->
                                    <Rectangle x:Name="innerRectangle" Fill="{TemplateBinding Background}"/>
                                    <!-- Present Content (text) of the button. -->
                                    <DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="center">
                                        <ContentPresenter x:Name="myContentPresenter" Margin="12" TextBlock.Foreground="{TemplateBinding Foreground}" TextBlock.FontSize="14" TextBlock.FontWeight="Light"/>
                                    </DockPanel>
                                    <Rectangle x:Name="test" Fill="{TemplateBinding anything }" Height="4" VerticalAlignment="Bottom"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                   <Style.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                          <Setter Property="Background" Value="#d2d2d2"/>
                          <Setter Property="Foreground" Value="White"/>
                          <Setter Property="anything" Value="Blue" />
                    </Trigger>
                 </Style.Triggers>
</Style>

如果fill是button中的一个属性,显然这是可行的,我是否认为这是完全错误的?

谢谢!

1 个答案:

答案 0 :(得分:3)

您将必须使用ControlTemplate.Triggers,然后才能在设置器中使用TargetName访问矩形。 像这样:

<Style TargetType="{x:Type Button}" x:Key="MenuButton">
        <Setter Property="Background" Value="#d8d8d8" />
        <Setter Property="Foreground" Value="Black" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">

                        <!-- Inner Rectangle with rounded corners. -->
                        <Rectangle x:Name="innerRectangle" Fill="{TemplateBinding Background}"/>
                        <!-- Present Content (text) of the button. -->
                        <DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="center">
                            <ContentPresenter x:Name="myContentPresenter" Margin="12" TextBlock.Foreground="{TemplateBinding Foreground}" TextBlock.FontSize="14" TextBlock.FontWeight="Light"/>
                        </DockPanel>
                        <Rectangle x:Name="test" Fill="Black" Height="4" VerticalAlignment="Bottom"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#d2d2d2"/>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter TargetName="test" Property="Fill" Value="Green" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>