How to draw a composite drawing as a button content in a fluid Layout in WPF
I am designing a WPF application that have responsive layout that means it automatically resize according to any screen size. The main factor of my design is I use a DPI decorator class to adjust according to the DPI of the monitor and for the flexible layout I use Grid.row definition and Grid.column definition.
And according to my design purpose I want to place a button in the top bar of my design that's why I use the Dock panel because it's have some DockPanel.Dock property. So that we place a button at a particular position like left, right, center.
I successfully place the button and my button is perfectly showing it's text content but the problem is when I try to show a composite drawing as button content the button is not showing perfectly it's shrinking in it's size. it's a responsive layout that's why I only use Margin and padding but the problem is not going. As much as I discovered my problem will solve if I use static values like Height and Width of that button but most people recommend me that I should not use Height and Width because they are treated as absolute positioning.
I have some questions regarding this Layout.
1) How I position the button at a particular place? that means I am not satisfied with the Dockpanel.Dock property position because either they have right, left or center, only some specific position. I know the only way is to use the Margin property. Does it breaks the the Fluid/Layout layout design? Is there any other way?
2) How I draw the composite drawing as a button content? Because by using padding and Margin the button is not sizing appropriately it's shrinking in size and don't give the look I want. If I use Height and width of the button then it's look as usual.
Now my question is should I use Height and Width ? does it breaks the Fluid/Layout property.
Here is the code of my Mainwindow.XAML
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
AllowsTransparency="False"
WindowStyle="None"
MouseLeftButtonDown="Window_MouseLeftButtonDown"
Title="MainWindow"
x:Name="LayoutRoot"
ResizeMode="CanResize"
Loaded="Window_Loaded"
Height="547.4" Width="1024"
>
<local:DpiDecorator>
<Grid Background="#282828">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DockPanel x:Name="xp" Grid.Row="0" LastChildFill="False" Background="#282828">
<Button Style="{StaticResource BoundCorner}"
Name="BtnClose" Width="61" Height="32" SnapsToDevicePixels="True" DockPanel.Dock="Right" Margin="0,0,12,0"
VerticalAlignment="Top" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" >
</Button>
</DockPanel>
<WrapPanel x:Name="wp" Grid.Row="1" HorizontalAlignment="Stretch" Orientation="Horizontal">
<StackPanel Width="100">
<Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
<Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
<Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
<Rectangle Fill="CornflowerBlue" Height="20" Margin="3"/>
</StackPanel>
<Rectangle Margin="3" Fill="CornflowerBlue" Width="94" Height="200" ></Rectangle>
</WrapPanel>
<Rectangle Margin="3" Grid.Row="2" Fill="Cyan" Height="50" HorizontalAlignment="Stretch"/>
</Grid>
</local:DpiDecorator>
</Window>
I use a control template for my button and the composite drawing is inside that control template as a <Setter Property="Content">.
Here is my Control template code for that button -
<Style
x:Key="BoundCorner"
x:Name="BoundCornerButton"
TargetType="{x:Type Button}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="Foreground" Value="#d0021b" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Border
x:Name="border"
BorderThickness="0"
CornerRadius="0,0,3,3">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5" />
<TranslateTransform X="0.02" Y="0.3" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Offset="1" Color="#161616" />
<GradientStop Offset="0.3" Color="#161616" />
</RadialGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="#d0021b" />
<Setter Property="Foreground" Value="#ffffff" />
<Setter Property="Content">
<Setter.Value>
<Rectangle Margin="1,1,0,0" Height="11.8" Width="11" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="False" RenderOptions.ClearTypeHint="Enabled">
<Rectangle.Fill>
<DrawingBrush >
<DrawingBrush.Drawing>
<DrawingGroup x:Name="WindowClose_MouseOver">
<DrawingGroup.ClipGeometry>
<RectangleGeometry Rect="0,0,24,24" />
</DrawingGroup.ClipGeometry>
<GeometryDrawing Brush="#ffffff">
<GeometryDrawing.Geometry>
<PathGeometry FillRule="Nonzero" Figures="M13.46,12L19,17.54 19,19 17.54,19 12,13.46 6.46,19 5,19 5,17.54 10.54,12 5,6.46 5,5 6.46,5 12,10.54 17.54,5 19,5 19,6.46 13.46,12z" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen LineJoin="Miter" Brush="#ffffff" Thickness="1.5"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="border" Property="Background" Value="#161616" />
<Setter Property="Foreground" Value="#d0021b" />
<Setter Property="Content">
<Setter.Value>
<Rectangle Margin="1,1,0,0" Height="11.8" Width="11" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="False" RenderOptions.ClearTypeHint="Enabled">
<Rectangle.Fill>
<DrawingBrush >
<DrawingBrush.Drawing>
<DrawingGroup x:Name="WindowClose_MouseOver_False">
<DrawingGroup.ClipGeometry>
<RectangleGeometry Rect="0,0,24,24" />
</DrawingGroup.ClipGeometry>
<GeometryDrawing Brush="#d0021b">
<GeometryDrawing.Geometry>
<PathGeometry FillRule="Nonzero" Figures="M13.46,12L19,17.54 19,19 17.54,19 12,13.46 6.46,19 5,19 5,17.54 10.54,12 5,6.46 5,5 6.46,5 12,10.54 17.54,5 19,5 19,6.46 13.46,12z" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen LineJoin="Miter" Brush="#d0021b" Thickness="1.5"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5" />
<TranslateTransform X="0.02" Y="0.3" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Offset="1" Color="#b7261f" />
<GradientStop Offset="0.3" Color="#b7261f" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Content">
<Setter.Value>
<Rectangle Margin="1,1,0,0" Height="11.8" Width="11" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="False" RenderOptions.ClearTypeHint="Enabled">
<Rectangle.Fill>
<DrawingBrush >
<DrawingBrush.Drawing>
<DrawingGroup x:Name="WindowClose_IsPressed">
<DrawingGroup.ClipGeometry>
<RectangleGeometry Rect="0,0,24,24" />
</DrawingGroup.ClipGeometry>
<GeometryDrawing Brush="#d37c78">
<GeometryDrawing.Geometry>
<PathGeometry FillRule="Nonzero" Figures="M13.46,12L19,17.54 19,19 17.54,19 12,13.46 6.46,19 5,19 5,17.54 10.54,12 5,6.46 5,5 6.46,5 12,10.54 17.54,5 19,5 19,6.46 13.46,12z" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen LineJoin="Miter" Brush="#d37c78" Thickness="1.5"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Please kindly solve my issue.