CODEWITHSUNDEEP
c#xamluwp
user7841585
user7841585

Reputation:

XAML Layout Problems

I'm new to UWP and have been struggling most of the day with what should be some simple XAML but I cannot get it to layout I the way I want. What I'm trying to achieve is shown below.

A single piece of text centered horizontally and vertically in Column 1. 2 pieces of text left aligned in Column 2. A single piece of text centered horizontally and vertically in Column 3.

This is the XAML I have so far. I know I need to use columns but even when trying to do that I cannot get the layout right at all.

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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView x:Name="list" IsItemClickEnabled="False" SelectionMode="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <StackPanel>
                        <TextBlock Text="{Binding Destination}"/>
                        <TextBlock Text="{Binding Company}"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>
</Page>

Would appreciate any help in getting the list to look the way I need.

EDIT

This is the code I am now using and the results I'm getting - can anyone help me in getting the grid to fill up the whole width of the list?

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TramTimes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
x:Class="TramTimes.ServicesPage"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Maps:MapControl x:Name="map" Height="300" VerticalAlignment="Top"/>
    <ListView x:Name="list" IsItemClickEnabled="False"  Margin="0,300,0,0" SelectionMode="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="3.5*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Scheduled}"/>

                    <StackPanel Grid.Column="2">
                        <TextBlock Text="{Binding Destination}"/>
                        <TextBlock Text="{Binding Company}"/>
                    </StackPanel>

                    <TextBlock Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Route}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>
</Page>

Upvotes: 1

Views: 151

Answers (2)

user7841585
user7841585

Reputation:

I got this fixed - forgot that column references are 0 based which wasn't helping and also added the below which made the grid fill the whole width of the list.

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>

Upvotes: 5

Marian Dolinsk&#253;
Marian Dolinsk&#253;

Reputation: 3492

You can add columns to your grid in the template with proportioned width:

<DataTemplate>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="3.5*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="{Binding Destination}" Grid.Column="0"/>
        <TextBlock Text="{Binding Company}" Grid.Column="1"/>
        <TextBlock Text="3rd column" Grid.Column="2"/>
    </Grid>
</DataTemplate>

Learn more about layout panels in UWP and specifically Grid here.

Upvotes: 0

Related Questions