How to design a login page with fully responsive page as like as Web page (Using Blend or VS 2023)

Santhosh Badam 40

I need to build a pages for WPF app using XAML in such way that each page should be responsive as like as in the browser web pages(Microsoft Blend or Visual Studio 2022).

For an example login page, sign up page or any other pages for a WPF app.

2 answers

Hui Liu-MSFT 48,571 Microsoft Vendor

Hi,@Santhosh Badam . Welcome to Mirosoft Q&A.

Here is the sample code for the registration login page. You could try to refer to it.

registion.txt

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Santhosh Badam 40 Reputation points

2024-08-02T04:45:17.8033333+00:00

Hi , @Hui Liu-MSFT.

I am interested in more in responsive design for the WPF pages even a small login page with out any DB connections (say simple static page). like if changes the page, maximize or minimize then the page be responsive.

Similar to the Calculator in windows, web pages in browser.

Hui Liu-MSFT 48,571 Microsoft Vendor

Hi,@Santhosh Badam . Here's a simple example of a responsive WPF login page that adapts to window resizing. This example uses a Grid layout with rows and columns that automatically adjust based on the window size.


<Window x:Class="WpfApp3.MainWindow"
       
     ... ResizeMode="CanResize"
        Title="MainWindow" Height="400" Width="400">
    <Window.Resources>
        <local:WidthConverter x:Key="WidthConverter"/>
        <Style TargetType="TextBox">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,0,0,10"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderBrush" Value="Gray"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=ActualWidth, Converter={StaticResource WidthConverter}}"/>

            
            <Style.Triggers>
                <Trigger Property="IsKeyboardFocusWithin" Value="False">
                    <Setter Property="Foreground" Value="Gray"/>
                    <Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style TargetType="PasswordBox">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,0,0,10"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderBrush" Value="Gray"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=ActualWidth, Converter={StaticResource WidthConverter}}"/>
            <Style.Triggers>
                <Trigger Property="IsKeyboardFocusWithin" Value="False">
                    <Setter Property="Foreground" Value="Gray"/>
                    <Setter Property="Tag" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0"  VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0"  Text="Login" FontSize="24" HorizontalAlignment="Center" Margin="0,0,0,20"/>
            <TextBox Grid.Row="1" Name="UsernameTextBox"  Tag="Username" />
            <PasswordBox  Grid.Row="2" Name="PasswordBox"  Tag="Password"/>
        </Grid>

        <Button Grid.Row="1" Width="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=ActualWidth, Converter={StaticResource WidthConverter}}"  Content="Login" HorizontalAlignment="Center"  Margin="0,0,0,10"/>
        <TextBlock Grid.Row="2" Text="Forgot your password?" HorizontalAlignment="Center" Margin="0,10,0,0"/>
    </Grid>
</Window>

public class WidthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double width)
        {
            return width * 0.6; // Adjust as needed for your layout
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

the result

User's image

Santhosh Badam 40 Reputation points

2024-08-06T07:31:47.52+00:00

Hi, @Hui Liu-MSFT . Thanks for the response. But i need the responsive page in WPF like the web/UWP application. For the Login, Sign Up pages (static). if we change the page sizes then the

elements in the page set automatically as like attached calculator image(s). Also the reference link also added here.

https://learn.microsoft.com/en-us/windows/apps/design/layout/responsive-design

Hui Liu-MSFT 48,571 Microsoft Vendor

Hi,@Santhosh Badam . You could try to refer to the following code.

<Window x:Class="WpfApp1.MainWindow"
     ...
        Title="MainWindow" Height="450" Width="400">
    <Window.Resources>
        <local:WidthConverter x:Key="WidthConverter"/>


        <Style TargetType="TextBox">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,0,0,10"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderBrush" Value="Gray"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="MinWidth" Value="300"/>
            <Setter Property="Width"  Value="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource WidthConverter}}" />
            <Setter Property="Height" Value="40"/>
        
            <Style.Triggers>
                <Trigger Property="IsKeyboardFocusWithin" Value="False">
                    <Setter Property="Foreground" Value="Gray"/>
                    <Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style TargetType="PasswordBox">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,0,0,10"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="BorderBrush" Value="Gray"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="MinWidth" Value="300"/>
            <Style.Triggers>
                <Trigger Property="IsKeyboardFocusWithin" Value="False">
                    <Setter Property="Foreground" Value="Gray"/>
                    <Setter Property="Tag" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="3*" MinWidth="300" />
            <ColumnDefinition  Width="2*"  MinWidth="200" MaxWidth="300" />
        </Grid.ColumnDefinitions >
        <Grid Grid.Row="0" x:Name="MainPanel" VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0"  Text="Login" Height="40"  Width="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource WidthConverter}}" HorizontalAlignment="Center"/>
            <TextBox Grid.Row="1" Name="UsernameTextBox"  Width="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource WidthConverter}}" Tag="Username" />
            <PasswordBox  Grid.Row="2" Name="PasswordBox"  Width="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource WidthConverter}}" Tag="Password"/>
        </Grid>

        <Button Grid.Row="1" MinWidth="300" Width="{Binding ElementName=MainPanel, Path=ActualWidth, Converter={StaticResource WidthConverter}}"    Content="Login" HorizontalAlignment="Center"  Margin="0,0,0,10"/>
        <TextBlock Grid.Row="2" Text="Forgot your password?" Width="{Binding ElementName=MainPanel, Path=ActualWidth, Converter={StaticResource WidthConverter}}"   HorizontalAlignment="Center" Margin="0,10,0,0"/>

        <Grid x:Name="SidePanel" Grid.Column="1" Grid.Row="0" MinWidth="200" MaxWidth="300"  Visibility="Collapsed" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0"   Text="Register" MinWidth="150"  Width="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource WidthConverter}}" HorizontalAlignment="Center" />
            <TextBox Grid.Row="1"  Name="Username" MinWidth="150"   Width="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource WidthConverter}}"   Tag="Username"/>
            <PasswordBox Grid.Row="2" Name="Password" MinWidth="150"   Width="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource WidthConverter}}"   Tag="Password"/>
            <TextBox Grid.Row="3"  Name="EmailTextBox" MinWidth="150"   Width="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Converter={StaticResource WidthConverter}}"   Tag="Email" />
           

        </Grid>

        <Button  Grid.Column="1"  Grid.Row="1" Content="Register" HorizontalAlignment="Center" Height="50"  Width="{Binding ElementName=SidePanel, Path=ActualWidth, Converter={StaticResource WidthConverter}}"  Margin="0,10,0,10"/>
        <TextBlock  Grid.Column="1" Grid.Row="2" Text="Already have an account? Login" Width="{Binding ElementName=SidePanel, Path=ActualWidth, Converter={StaticResource WidthConverter}}"   HorizontalAlignment="Center" Height="50" Margin="0,10,0,0"/>
    </Grid>
</Window>

c#

Codebehind:


 public partial class MainWindow : Window
 {
    

     public MainWindow()
     {
         InitializeComponent();
         this.SizeChanged += MainWindow_SizeChanged;
     }

     private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
     {
       
         if (e.NewSize.Width >600) 
         {
             SidePanel.Visibility = Visibility.Visible;
         }
         else
         {
             SidePanel.Visibility = Visibility.Collapsed;
         }
     }
 }

 public class WidthConverter : IValueConverter
 {
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
         if (value is double width)
         {
             return width * 0.6; // Adjust as needed for your layout
         }
         return value;
     }

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
     {
         throw new NotImplementedException();
     }
 }

User's image

When you drag the window's width to the specified number, it displays the additional user interface. It is a layout and you can adjust the content as you want.

User's image

Santhosh Badam 40 Reputation points

2024-08-07T08:59:57.2266667+00:00

Hi, @Hui Liu-MSFT . Thanks for the response. But I need is responsive page for the previous query. Given solution is results the login and Register contents side by side. But window size changes or minimize then maximize the contents are not Wrapping.

But my requirement is as like the below link suggests Reposition, Resize, Reflow, and Show/Hide. Based on the content should perform in "WPF app".
https://learn.microsoft.com/en-us/windows/apps/design/layout/responsive-design

Giving the Repositioning images below(For WPF app)

Also should work for Resize, Reflow, and Show/Hide.

Thanks

Hui Liu-MSFT 48,571 Microsoft Vendor

Hi,@Santhosh Badam .My previous solution was based on calculator effects. The calculator does not seem to include repositioning.

But window size changes or minimize then maximize the contents are not Wrapping.

For text wrapping, you can set the property TextWrapping="Wrap" for the TextBlock.

 <TextBlock Grid.Row="2" TextWrapping="Wrap" Text="Forgot your password?..................................." Width="{Binding ElementName=MainPanel, Path=ActualWidth, Converter={StaticResource WidthConverter}}"   HorizontalAlignment="Center" Margin="0,10,0,0"/>

For more information on layouts in WPF, see Document Panel Elements and Customizing Layout Behavior.

But my requirement is as like the below link suggests Reposition, Resize, Reflow, and Show/Hide. Based on the content should perform in "WPF app".

Reposition:


<Window.Resources>

    <local:WidthToOrientationConverter x:Key="WidthToOrientationConverter"/>

    <Style TargetType="StackPanel">

        <Setter Property="Orientation" Value="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Converter={StaticResource WidthToOrientationConverter}}"/>

       

    </Style>

</Window.Resources>

<StackPanel >

   

        <TextBlock Text="Hello, World wwwwwwwwwwwwwwww!" Background="AliceBlue" TextWrapping="Wrap"  FontSize="24"/>

    <TextBlock Text="Hello, World wwwwwwwwwwwwwwwwwww!" Background="Pink" TextWrapping="Wrap"  FontSize="24"/>

</StackPanel>

WidthToOrientationConverter :

 public class WidthToOrientationConverter : IValueConverter
 {
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
         if (value is double width)
         {
             return width > 400 ? Orientation.Horizontal : Orientation.Vertical;
         }
         return Orientation.Vertical;
     }

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
     {
         throw new NotImplementedException();
     }
 }

Resize:

<Window x:Class="LayoutDemo.MainWindow"
        ...
        xmlns:local="clr-namespace:LayoutDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Window.Resources>
        <local:WidthConverter x:Key="WidthConverter"/>
    </Window.Resources>
    <DockPanel>
        <Canvas Width="{Binding RelativeSource={RelativeSource AncestorType=DockPanel}, Path=ActualWidth, Converter={StaticResource WidthConverter}}">
            <TextBlock Text="Hello, World wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww!"
            Width="{Binding RelativeSource={RelativeSource AncestorType=DockPanel}, Path=ActualWidth, Converter={StaticResource WidthConverter}}" TextWrapping="Wrap"
              FontSize="24"/>
        </Canvas>
     
    </DockPanel>
</Window>

 public class WidthConverter : IValueConverter
 {
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
         if (value is double width)
         {
             return width * 0.9; // Adjust as needed for your layout
         }
         return value;
     }

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
     {
         throw new NotImplementedException();
     }
 }

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Hui Liu-MSFT 48,571 Reputation points Microsoft Vendor

2024-08-16T05:49:06.2633333+00:00

Hi,@Santhosh Badam. Is there any update to the question? Did my answer solve your problem? If so, you could accept it as the answer. It's helpful for community members with related questions.

Joshua Lazaro Marandi 70 Reputation points

2024-08-17T22:16:01.06+00:00

Welcome to coding TV show to learn more
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to design a login page with fully responsive page as like as Web page (Using Blend or VS 2023)

2 answers

Your answer