CODEWITHSUNDEEP
wpfxaml
Valkyry
Valkyry

Reputation: 147

Responsive wpf Window

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

Upvotes: 1

Views: 11464

Answers (3)

Sajini Mallikarachchi
Sajini Mallikarachchi

Reputation: 49

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

Upvotes: 0

AnjumSKhan
AnjumSKhan

Reputation: 9827

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?

Upvotes: 5

Jason Boyd
Jason Boyd

Reputation: 7029

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>

Upvotes: 0

Related Questions