Posted by: Zeeshan Amjad | November 1, 2012

HorizontalContentAlignment in WPF and WinRT


When saw several usage of HorizontalContentAlignment property when we want to display more than one data in list box or combo box in WPF. Let’s first review this in WPF before studying in WinRT. HorizontalContentAlignment is an enum type of HorizontalAlignment with four possible values, as shown by this class diagram.

HorizontalAlignment

Let’s take a look at this usage in ListBox in WPF. Let’s make a simple state class and use it.

Code Snippet
public class State
{
    public string Name
    { get; set; }

    public string Abbrivation
    { get; set; }
}

 

Let’s define the data template for ListBox to user HorizontalContentAlignment property.

Code Snippet
<ListBox Margin="5" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Navy" Margin="3" BorderThickness="2" CornerRadius="3">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Margin="2" Text="{Binding Name}"/>
                    <TextBlock Grid.Column="1" Margin="2" Text="{Binding Abbrivation}"/>
                </Grid>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

 

Here is its output.

WPFHorizontalContentAlignment

Now let’s do the same thing in WinRT and uses the same thing with ListView in WinRT. Here is our first attempt.

Code Snippet
<ListView ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Navy" Margin="3" BorderThickness="2" CornerRadius="3">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Margin="2" Text="{Binding Name}"/>
                    <TextBlock Grid.Column="1" Margin="2" Text="{Binding Abbrivation}"/>
                </Grid>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

 

Here is its output.

WinRTHorizontalContentAlignment_01

From the output of this program it is clear that the usage of HorizontalContentAlignment property is different in WPF and WinRT. In WinRT we have to define the HorizontalContentAlignment on ListViewItem control, not on ListView. Here is XAML code to define it.

Code Snippet
<Style x:Key="style" TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>

 

We have to use ItemContainerStyle property to set this style. Here complete XAML code of the program.

Code Snippet
<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="ListView.BasicPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
    xmlns:local="using:ListView"
    xmlns:common="using:ListView.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
    mc:Ignorable="d">

    <Page.Resources>

        <!– TODO: Delete this line if the key AppName is declared in App.xaml –>
        <x:String x:Key="AppName">WinRT HorizontalContentAlignment</x:String>
        
        <Style x:Key="style" TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </Page.Resources>

    <!–
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    –>
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!– Back button and page title –>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

        <FlipView
            x:Name="flipView"
            AutomationProperties.AutomationId="MainFlipView"
            AutomationProperties.Name="Main View"
            TabIndex="1"
            Grid.Row="1"
            >
            
            <ListView ItemsSource="{Binding}" ItemContainerStyle="{StaticResource style}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Navy" Margin="3" BorderThickness="2" CornerRadius="3">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Margin="2" Text="{Binding Name}"/>
                                <TextBlock Grid.Column="1" Margin="2" Text="{Binding Abbrivation}"/>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </FlipView>
        
        <VisualStateManager.VisualStateGroups>

            <!– Visual states reflect the application's view state –>
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!– The entire page respects the narrower 100-pixel margin convention for portrait –>
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!– The back button and title have different styles when snapped –>
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>

 

Here is an output of this program.

WinRTHorizontalContentAlignment_02

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: