Как получить прямоугольник внутри моей кнопки, чтобы изменить цвет при наведении курсора?

Question

Как мне получить прямоугольник внутри моей кнопки, чтобы перевернуть его цвет при наведении мне, кажется, нужно свойство fill, которое не находится внутри кнопка.

Вот что я хочу:

Посмотрите на синий прямоугольник внизу кнопки при наведении. изменить цвет кнопки на синий.

Я пробовал это:

<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 был свойством кнопки, я думаю об этом совершенно неправильно?

Спасибо всем!

Answer 1

Вам нужно будет использовать 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>