使用模板懸停時如何使按鈕突出顯示

最近開始 WPF 并且對 XAML 非常陌生。我正在嘗試制作一個看起來類似于 IOS 的計算器。但是，在我更改為 后Button，Ellipse懸停或單擊時的突出顯示停止作業，如果還要修復突出顯示問題，我將如何更改它的顏色？

<Button x:Name="ButtonEquals" Grid.Column="4" Grid.Row="6" Width="47" Height="47"
        Content="=" Foreground="White"
        BorderBrush="{x:Null}" Background="#FFFF9500">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Fill="#FFFF9500"/>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

uj5u.com熱心網友回復：

您可以將 a 添加Trigger到ControlTemplate并按Ellipse名稱指定 anx:Name并通過 參考它TargetName。這樣，您也可以定義其他狀態。

<ControlTemplate TargetType="Button">
   <Grid>
      <Ellipse x:Name="MyEllipse" Fill="#FFFF9500"/>
      <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
   </Grid>
   <ControlTemplate.Triggers>
      <Trigger Property="IsDefaulted" Value="True">
         <Setter TargetName="MyEllipse" Property="Fill" Value="OrangeRed"/>
      </Trigger>
      <Trigger Property="IsMouseOver" Value="True">
         <Setter TargetName="MyEllipse" Property="Fill" Value="Blue"/>
      </Trigger>
      <Trigger Property="IsPressed" Value="True">
         <Setter TargetName="MyEllipse" Property="Fill" Value="Red"/>
      </Trigger>
      <Trigger Property="IsEnabled" Value="False">
         <Setter TargetName="MyEllipse" Property="Fill" Value="Gray"/>
      </Trigger>
   </ControlTemplate.Triggers>
</ControlTemplate>

這僅針對Fill的Ellipse，而不更改模板中的其他控制元件。但是，這些值是硬編碼的，不能從外部更改。

如果您希望模板在一定程度上可定制，那么您可以將其Style放在模板化控制元件上的 a 和系結屬性中，使用TemplateBinding或 a RelativeSourcewithTemplatedParent用于雙向和特殊場景。此外，您可以添加一個FocusVisualStyle允許指定鍵盤聚焦模板。

<Style TargetType="Button">
   <Setter Property="Background" Value="#FFFF9500"/>
   <Setter Property="Foreground" Value="White"/>
   <Setter Property="FocusVisualStyle">
      <Setter.Value>
         <Style>
            <Setter Property="Control.Template">
               <Setter.Value>
                  <ControlTemplate>
                     <Ellipse StrokeDashArray="1 2" Stroke="DarkGreen" StrokeThickness="2"/>
                  </ControlTemplate>
               </Setter.Value>
            </Setter>
         </Style>
      </Setter.Value>
   </Setter>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="Button">
            <Grid>
               <Ellipse x:Name="MyEllipse" Fill="{TemplateBinding Background}"/>
               <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
            <ControlTemplate.Triggers>
               <Trigger Property="IsDefaulted" Value="True">
                  <Setter TargetName="MyEllipse" Property="Fill" Value="OrangeRed"/>
               </Trigger>
               <Trigger Property="IsMouseOver" Value="True">
                  <Setter TargetName="MyEllipse" Property="Fill" Value="Blue"/>
               </Trigger>
               <Trigger Property="IsPressed" Value="True">
                  <Setter TargetName="MyEllipse" Property="Fill" Value="Red"/>
               </Trigger>
               <Trigger Property="IsEnabled" Value="False">
                  <Setter TargetName="MyEllipse" Property="Fill" Value="Gray"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

如果您想在多個按鈕上重用該樣式，請將其添加到范圍內的資源字典中并分配一個以通過orx:Key參考它。StaticResourceDynamicResource

uj5u.com熱心網友回復：

您需要改為創建Style按鈕Template。您可以設定內部樣式的按鈕模板（Style在 WPF 中了解更多資訊）：

        <Button x:Name="ButtonEquals"
                Grid.Column="4"
                Grid.Row="6"
                Width="47"
                Height="47"
                Content="=">
            <Button.Style>
                <Style TargetType="Button">
                    <!-- Here is properties for buttons with same style-->
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="BorderBrush" Value="{x:Null}"/>
                    <Setter Property="Background" Value="#FFFF9500"/>
                    
                    <!-- Here is your template -->
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Ellipse Fill="{TemplateBinding Background}"/>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    
                    <!-- Here is style triggers for interact with button -->
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <!-- Set color as you wish -->
                            <Setter Property="Background" Value="LightSalmon"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

但實際上，您需要創建全域ResourceDictionary（閱讀它）并為所有按鈕設定樣式，例如<Style x:Key="CalculatorButton">設定為按鈕<Button Content="1" Style="{StaticResource CalculatorButton}"/>

標籤：C＃ wpf xml 按钮 控制模板

上一篇：在MVVM中正確系結UserControl的DependencyProperty

下一篇：同時運行多個影片