Responsive wpf Window - wpf

Question

I am new with WPF please keep that in mind. I am trying to Make the Window Responsive to Resize, Is it possible that my controls such as textboxes and buttons are Resized as window grows or shrinks?
<Window x:Class="WPF_Working_Experimenet.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="216.586" Width="459.256">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="156*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Label Content="username :" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="66,27,0,0" Height="30" Width="63" FontFamily="B Nazanin" FontSize="15" Grid.Column="1"/>
<Label Content="password :" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="74,63,0,0" Height="30" Width="55" FontFamily="B Nazanin" FontSize="15" Grid.Column="1"/>
<Label x:Name="lblwrong" Content="" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,150,0,0" ClipToBounds="True" Grid.Column="1" Height="26" Width="275"/>
<Button x:Name="btnLogin" Content="Login" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Grid.Column="1" Margin="211,103,0,0" Height="37" Background="White" Click="btnLogin_Click" BorderBrush="Red" FontFamily="B Nazanin" FontSize="15"/>
<Image HorizontalAlignment="Left" Height="117" Margin="4,23,0,0" VerticalAlignment="Top" Width="178" Source="img/Ticket_5523675581838074942.png" Grid.ColumnSpan="2" RenderTransformOrigin="0.5,0.128"/>
<Button x:Name="btnExit" Content="Exit" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Grid.Column="1" Margin="146,103,0,0" Height="37" Background="#FFFDFDFD" BorderBrush="Red" Click="Button_btnExit" FontFamily="B Nazanin" FontSize="15"/>
<TextBox x:Name="txtUsername" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="125" Grid.Column="1" Margin="146,34,0,0" BorderBrush="#FFF7311E"/>
<PasswordBox x:Name="txtPassword" Grid.Column="1" HorizontalAlignment="Left" Margin="146,70,0,0" VerticalAlignment="Top" Width="125" Height="23" BorderBrush="#FFFD3306"/>
</Grid>
</Window>
Any Reference/hint or Tutorial/link would be lovely. thank you in advance

Answer 1

You have to set Margin / Padding instead of explicit Width / Height if you want your controls to grow / shrink.
Few links to help you :
Layout with Absolute and Dynamic Positioning
How to make all controls resize accordingly proportionally when window is maximized?

Answer 2

Controls do not resize if you set their Width and Height properties explicitly. Try the following, I removed the Width and Height properties and changed the HorizontalAlignment and VerticalAlignment values to Stretch.
<Window x:Class="WPF_Working_Experimenet.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="216.586" Width="459.256">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="156*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Label Content="username :"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="B Nazanin"
FontSize="15"
Grid.Column="1"/>
<Label Content="password :"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="B Nazanin"
FontSize="15"
rid.Column="1"/>
<Label x:Name="lblwrong"
Content=""
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="True"
Grid.Column="1"/>
<Button x:Name="btnLogin"
Content="Login"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="White"
Click="btnLogin_Click"
BorderBrush="Red"
FontFamily="B Nazanin"
FontSize="15"/>
<Image HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="img/Ticket_5523675581838074942.png"
Grid.ColumnSpan="2"
RenderTransformOrigin="0.5,0.128"/>
<Button x:Name="btnExit"
Content="Exit"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Background="#FFFDFDFD"
BorderBrush="Red"
Click="Button_btnExit"
FontFamily="B Nazanin"
FontSize="15"/>
<TextBox x:Name="txtUsername"
HorizontalAlignment="Stretch"
TextWrapping="Wrap"
VerticalAlignment="Stretch"
Grid.Column="1"
BorderBrush="#FFF7311E"/>
<PasswordBox x:Name="txtPassword"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="#FFFD3306"/>
</Grid>
</Window>

Answer 3

<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="View/Images/LoginImg.jpg" Stretch="Fill" Grid.Column="0" Grid.ColumnSpan="3">
<Image.Effect>
<BlurEffect Radius="8"/>
</Image.Effect>
</Image>
<TextBox Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Foreground="White" HorizontalAlignment="Center"
Height="78" Margin="122,10,45.6,0" TextWrapping="Wrap" Text="Library Management System " VerticalAlignment="Top" Width="594" FontSize="40" FontWeight="Bold" FontStyle="Normal">
<TextBox.VerticalContentAlignment>Center</TextBox.VerticalContentAlignment>
<TextBox.IsReadOnly>True</TextBox.IsReadOnly>
</TextBox>
<Canvas Grid.Column="1" HorizontalAlignment="Stretch" Width="auto" Height="300" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" Background="White">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0.627"/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Label Content="Login" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Background="BurlyWood" FontSize="15" Height="52" Width="254">
<Label.FontWeight>Bold</Label.FontWeight>
</Label>
<TextBox Height="24" Canvas.Left="20" TextWrapping="Wrap" Text="User Name" TextAlignment="Center" Canvas.Top="84" Width="120" Foreground="Gray"/>
<PasswordBox Canvas.Left="20" Canvas.Top="136" Height="34" Width="120"/>
</Canvas>
</Grid>
Setting the horizontal and vertical alignment to stretch instead of setting width and height of the widget will do the trick. But still you can set a margin if you want. Tried this out and it ensured that when the window size is changed the widget will adjust respectively.