Responsive wpf Window

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

What is the question? How do you make it responsive? I don't really understand what you mean by 'responsive'. Can you give a specific example of something that is not behaving the way expect? — Jason Boyd, Sep 28 '15 at 00:09

score 5 · Accepted Answer · edited May 23 '17 at 10:34

5

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?

edited May 23 '17 at 10:34

Community

1
1

answered Sep 28 '15 at 05:15

AnjumSKhan

9,647
1
26
38

This is not correct. You are conflating resizing (the original question) with layout and arrangement. `HorizontalAlignment` and `VerticalAlignment` affect a control's layout as do the `Margin` and `Padding` properties. But `Margin` and `Padding` do not determine whether or not a control will resize itself. The alignment properties do that as well as the `HorizontalContentAlignment`, `VerticalContentAlignment`, `ColumnDefinition.Width`, etc... properties of the parent container when applicable. `Margin` and `Padding` affect the distance between a control and its parent and child. – Jason Boyd Sep 28 '15 at 13:08
@JasonBoyd The link which I have posted regarding Layout targets absolute and dynamic positioning not just absolute positioning. – AnjumSKhan Sep 28 '15 at 13:21

score 0 · Answer 2 · answered Sep 28 '15 at 00:28

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>

yeah thats it. however not quite the one i was expecting. thank you — Valkyry, Sep 28 '15 at 00:40
Downvoted as it focuses only on full stretching, what if user doesn't want control to fully stretch. — AnjumSKhan, Sep 28 '15 at 06:23
@AnjumSKhan - The user asked how to 'Make the Window Responsive to Resize'. The alignment properties do that. There are a host of other properties that affect the layout and arrangment of a control, as well, but those do not apply directly to this question. Additionally, it would take an entire chapter in a book to cover all of those properties. That is an unrealistically high expectation for an answer to a simple question. — Jason Boyd, Sep 28 '15 at 13:05
@JasonBoyd Setting values to Stretch will keep controls filling entire space which is not the requirement everytime. — AnjumSKhan, Sep 28 '15 at 13:18

score 0 · Answer 3 · answered Sep 07 '18 at 17:08

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

Responsive wpf Window

3 Answers3