XAML 如何使用模板使鼠标悬停在按钮上时突出显示按钮

llmtgqce  于 2022-12-07  发布在  其他
关注(0)|答案(2)|浏览(200)

最近开始WPF,我对XAML很陌生。我试图做一个计算器,看起来像IOS的一个。但是,当我改变ButtonEllipse,突出显示时,悬停或点击停止工作,如果突出显示的问题也要解决,我怎么去改变它的颜色?

<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>
9vw9lbht

9vw9lbht1#

您可以将Trigger添加到ControlTemplate,并通过名称指定x:Name并通过TargetName引用Ellipse。这样,您还可以定义其他状态。

<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>

这只会以EllipseFill为目的,而不会变更样板中的其他控件。不过,这些值是硬式编码,无法从外部变更。
如果您希望模板在某种程度上是可自定义的,则可以将其放在Style中,并使用TemplateBindingRelativeSourceTemplatedParent绑定模板化控件上的属性,以用于双向和特殊方案。此外,还可以添加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>

如果要在多个按钮上重用该样式,请将其添加到范围内的资源字典中,并分配一个x:Key以通过StaticResourceDynamicResource引用它。

khbbv19g

khbbv19g2#

您需要创建按钮的Style,而不是Template。按钮的模板可以在样式中设置(阅读WPF中有关Style的更多信息):

<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}"/>

相关问题