WPF:虚线按钮边框样式

时间:2018-03-15 11:00:22

标签: wpf button styles

请参阅此按钮Style

<Style x:Key="ButtonDefaultStyleDrop" TargetType="{x:Type Button}" BasedOn="{StaticResource MetroFlatButton}" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border TextBlock.Foreground="{TemplateBinding Foreground}"
                        x:Name="Border"
                        CornerRadius="5"
                        Background="{TemplateBinding Background}"
                        BorderThickness="1">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5" />
                                <VisualTransition GeneratedDuration="0" To="Pressed" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                            </VisualState>
                            <VisualState x:Name="Pressed">
                            </VisualState>
                            <VisualState x:Name="Disabled">
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter Margin="2"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      RecognizesAccessKey="True" />
                    <Border.BorderBrush>
                        <DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
                            <DrawingBrush.Drawing>
                                <DrawingGroup>
                                    <GeometryDrawing Brush="#FF7AA0CD">
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <RectangleGeometry Rect="0,0,50,50" />
                                                <RectangleGeometry Rect="50,50,50,50" />
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingGroup>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </Border.BorderBrush>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="Foreground" Value="#FF7AA0CD"/>
                        <Setter Property="BorderBrush" Value="#FF7AA0CD"/>
                        <Setter TargetName="Border" Property="BorderThickness" Value="1"/>
                        <Setter Property="FontSize" Value="22"/>
                    </Trigger>

                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="Transparent"/>
                        <Setter Property="Foreground" Value="Gainsboro"/>
                        <Setter TargetName="Border" Property="BorderBrush" Value="Gainsboro"/>
                        <Setter TargetName="Border" Property="BorderThickness" Value="1"/>
                        <Setter Property="FontSize" Value="22"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

结果:

enter image description here

所以在我的风格中,我希望在Border时更改MouseIsOver颜色,但我的Style会这样做但删除了Border折线,这看起来像常规线

我该如何解决?

1 个答案:

答案 0 :(得分:1)

要保留已停止的行,并且仅在鼠标悬停时更改Border颜色,只需将相同的DrawingBrush应用于其他颜色:

 <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="Border" Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Gainsboro"/>
        <Setter TargetName="Border" Property="BorderBrush">
            <Setter.Value>
                 <DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
                      <DrawingBrush.Drawing>
                            <DrawingGroup>
                                  <GeometryDrawing Brush="Gainsboro">
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <RectangleGeometry Rect="0,0,50,50" />
                                                <RectangleGeometry Rect="50,50,50,50" />
                                           </GeometryGroup>
                                       </GeometryDrawing.Geometry>
                                  </GeometryDrawing>                                         
                            </DrawingGroup>
                      </DrawingBrush.Drawing>
                 </DrawingBrush>
            </Setter.Value>
        </Setter>
        <Setter TargetName="Border" Property="BorderThickness" Value="1"/>
        <Setter Property="FontSize" Value="22"/>
</Trigger>