CODEWITHSUNDEEP
c#xamlwindows-10uwp
Kinjan Bhavsar
Kinjan Bhavsar

Reputation: 1449

How to make adaptive UI in Windows 10?

I am trying to migrate my old app to Windows 10 and I am facing an issue with Grid. I created a Grid in XAML page with WebView and ListView inside it in 2 different rows. Now problem is that it appears fine in Local Machine(Laptop) but when I check the same in Windows Phone, it doesn't look good(image, text looks very large). Please find my XAML code and DataTemplate for ListView below. I am aware that RelativePanel will save my day, but can anyone update my code and suggest me so that I can use the same on each page as my app uses ListView inside Grid very often.

XAML CODE

<Grid x:Name="LayoutRoot" Background="{StaticResource AppBackGroundColor}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <WebView Grid.Row="0"
             x:Name="webView"
             DefaultBackgroundColor="#388941"
             IsHitTestVisible="False"/>
    <ListView x:Name="loginandRegisterOptionslist"
             Margin="0,10,0,0"
             Grid.Row="1"
             ScrollViewer.VerticalScrollBarVisibility="Auto"
             ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
             ItemTemplate="{StaticResource WelcomePageListItemTemplate}"
             VerticalAlignment="Bottom"
             SelectionMode="Single"
             />
</Grid>

Data Template for above ListView

<DataTemplate x:Key="WelcomePageListItemTemplate">

        <Grid Margin="0,2,0,2"
          Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Image Width="80"
               Height="60"
               Name="img1"
               Stretch="Uniform"
               Margin="4,0,4,0"
               Grid.Column="0"
               Source="{Binding IMAGE_URL}"></Image>

            <StackPanel Grid.Column="1"
                    Margin="0,8,0,8">
                <TextBlock Text="{Binding TITLE}"
                       Margin="2"
                       Style="{StaticResource HeaderContentStyle}" />
                <TextBlock Text="{Binding VALUE}"
                       Margin="2"
                       Style="{StaticResource DescriptionContentStyle}" />
            </StackPanel>
        </Grid>

</DataTemplate>

Upvotes: 0

Views: 358

Answers (1)

thang2410199
thang2410199

Reputation: 1942

There are some solutions that you might want to try out:

  • Put your datatemplace inside an User Control, use Adaptive Trigger to custom the size of image and text according to difference screen sizes.
  • Use difference XAML View for difference device families
  • When launching the app, detect the device family, set the correct value for size binding base on that information

Upvotes: 2

Related Questions