CODEWITHSUNDEEP
wpfbuttonstyles
user2908206
user2908206

Reputation: 265

WPF: broken lines button border style

Please see this Button 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>

Result:

enter image description here

So in my style i want to change the Border color when MouseIsOver so but my Style do that but removed the Border broken lines and this looks like regular line.

How can i fix it ?

Upvotes: 0

Views: 193

Answers (1)

SamTh3D3v
SamTh3D3v

Reputation: 9944

To keep the discontinued line and only change the Border color when mouseover just apply the same DrawingBrush with another color:

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

Upvotes: 1

Related Questions