How to draw a composite drawing as a button content in a fluid Layout in WPF

MERUN KUMAR MAITY 491 Reputation points
2021-05-19T20:25:09.053+00:00

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.

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,624 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
9,921 questions
{count} votes