CODEWITHSUNDEEP
c#xamlwindows-phone-8windows-phone-8.1
dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

How do i add constraints phone 8.1 UAP Xaml

When I view my app in the Windows Phone 8.1 wvga 4 " the screen works fine as you see in the following screen shot

wvga 4" image

But when I view it on my 5"lumia it seems messaged up as in screenshot

5"lumia image

I know the iPhone uses a constraints system to keep items in place on all resolutions is their something similiar in windows phone 8.1

<Page
x:Class="findaPhysio.findaPhysioSearchDetails"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:findaPhysio"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
    xmlns:drawerLayout="using:DrawerLayout"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid x:Name="RootLayout">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <!--Title bar -->
    <Grid x:Name="TitleBar" Background="#373A36"  Grid.Row ="0" Height="60">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Margin="5"  x:Name="DrawerIcon"  Grid.Column="0" Source="/Assets/ic_drawer.png" HorizontalAlignment="Left" Tapped="DrawerIcon_Tapped" />
        <TextBlock Grid.Column="1" Text="findaPhysio" Foreground="White" VerticalAlignment="Center" FontSize="18"/>
    </Grid>
    <!--DrawerLayout bar -->
    <drawerLayout:DrawerLayout Grid.Row="1"  x:Name="DrawerLayout">
        <!--MainPage -->
        <Grid x:Name="MainFragment" Background="White">
            <local:MapView  x:Name="MyMap" Background="Black"  Zoom="5" ShowTraffic="True" Margin="10,51,0,325" Loaded="MyMap_Loaded"/>
            <TextBlock HorizontalAlignment="Left" Margin="18.167,281.833,0,0" FontSize="18" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Width="85" Foreground="Black" Height="31" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
                <TextBlock.RenderTransform>
                    <CompositeTransform SkewX="4.332" TranslateX="1.174"/>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock x:Name="txtAddress" HorizontalAlignment="Left" FontSize="18" Margin="116,282,0,0" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Width="175" Foreground="Black" RenderTransformOrigin="2.554,0.897"/>
            <TextBlock HorizontalAlignment="Left" Margin="22,257,0,0" FontSize="18" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" RenderTransformOrigin="0,0.256" Foreground="Black" IsTextSelectionEnabled="True"/>
            <TextBlock x:Name="txtTelephone" HorizontalAlignment="Left" FontSize="18" Margin="116,331,0,0" TextWrapping="Wrap" Text="Telephone" VerticalAlignment="Top" Foreground="Black" Tapped="txtTelephone_Tapped" Width="143"/>
            <TextBlock HorizontalAlignment="Left" Margin="16,331,0,0" FontSize="18" TextWrapping="Wrap" Text="Telephone" VerticalAlignment="Top" Foreground="Black"/>
            <TextBlock HorizontalAlignment="Left" Margin="16,325,0,0" FontSize="18" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Foreground="Black"/>
            <Button x:Name="btnBookNow" Content="Book Now" HorizontalAlignment="Left" Margin="108,427,0,0" VerticalAlignment="Top" Foreground="#FF589E5B" Background="#FF71C975" Tapped="btnBookNow_Tapped"/>
            <TextBlock HorizontalAlignment="Left" Margin="16,304,0,0" FontSize="18" TextWrapping="Wrap" Text="Town" VerticalAlignment="Top" Foreground="Black"/>
            <TextBlock x:Name="txtName" HorizontalAlignment="Left" Margin="116,257,0,0" FontSize="18" TextWrapping="Wrap" Text="Name:" VerticalAlignment="Top" RenderTransformOrigin="0,0.256" Foreground="Black" IsTextSelectionEnabled="True"/>
            <TextBlock x:Name="txtTown" HorizontalAlignment="Left" Margin="116,304,0,0" FontSize="18" TextWrapping="Wrap" Text="Town" VerticalAlignment="Top" Foreground="Black"/>
            <TextBlock HorizontalAlignment="Left" Margin="16,358,0,0" FontSize="18" TextWrapping="Wrap" Text="Web" VerticalAlignment="Top" Foreground="Black"/>
            <TextBlock x:Name="txtWeb" HorizontalAlignment="Left" FontSize="12" Margin="116,358,0,0" TextWrapping="Wrap" Text="Web" VerticalAlignment="Top" Foreground="Black" Tapped="txtTelephone_Tapped" Width="263" Height="22"/>
            <TextBlock x:Name="lblsp" HorizontalAlignment="Left" Margin="16,385,0,0" FontSize="18" TextWrapping="Wrap" Text="Speciality" VerticalAlignment="Top" Foreground="Black"/>
            <TextBlock x:Name="txttxtSpeciality" HorizontalAlignment="Left" FontSize="18" Margin="116,385,0,0" TextWrapping="Wrap" Text="Speciality" VerticalAlignment="Top" Foreground="Black" Tapped="txtTelephone_Tapped" Width="143"/>



        </Grid>
        <!--Favorites List Section -->
        <Grid x:Name="ListFragment">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Border Grid.Row="0" Background="#5490CC">
                <TextBlock HorizontalAlignment="Center" Margin="0,5,0,5" Text="Physio Details"
                                FontSize="25"/>
            </Border>
            <ListView Grid.Row="1" VerticalAlignment="Center" x:Name="ListMenuItems">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Background="White" Margin="0,0,0,1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0"   Text="{Binding}" Margin="10"  VerticalAlignment="Center" FontSize="18" Foreground="Black" />
                            <Rectangle Grid.Row="1" HorizontalAlignment="Left" Fill="Gray" Width="500" Height="0.5"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </Grid>
    </drawerLayout:DrawerLayout>
</Grid>

Upvotes: 0

Views: 106

Answers (1)

Mykyta Bondarenko
Mykyta Bondarenko

Reputation: 552

You should use GridColumns and GridRows property of Grid control for you XAML. You have problem with resolution, because you hardcode margins of you TextBlocks. You should write: 

<Grid>
   <Grid.RowDefinitions>
      <RowDefition />
      ......
   </Grid.RowDefinitions/>
   <Grid.ColumnDefinitions>
      ....
   </Grid.ColumnDefiniti‌​ons/>
.....
</Grid>

And after insert your TextBlock to need column and row, for ex.:

 <TextBlock Grid.Row="1" Grid.Column="1" />

Upvotes: 1

Related Questions