WP7 usercontrol - change control width when orientation changes

Question

In one of my apps I have a usercontrol called FeedControl (yep, it's yet another RSS reader!) which is very simple - just a checkbox to select the item, a textblock to show the feed name and another textblock to show the number of unread feed items. On loading the feeds into an observable collection at startup I then create one instance of the control for each feed and add them all to a listbox - pretty simple stuff really.

XAML code is below:

<UserControl x:Class="MyReader.FeedControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"             
Loaded="UserControl_Loaded" >

<Grid x:Name="LayoutRoot" Height="50" Background="Black" HorizontalAlignment="Left" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="70"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="70"/>
    </Grid.ColumnDefinitions>
    <CheckBox Name="Select" Grid.Column="0" IsChecked="{Binding IsSelected}" Margin="-5,-16" Checked="Select_Checked" Background="White"/>
    <TextBlock Name="FeedName" Grid.Column="1" Text="{Binding FeedName}" Opacity="1" Margin="-20" VerticalAlignment="Center" FontSize="24" 
               MouseLeftButtonUp="FeedName_MouseLeftButtonUp" Height="32" Width="360"/>
    <TextBlock Name="UnreadItems" Grid.Column="2" Text="{Binding UnreadItems}" Opacity="1" Padding="2" VerticalAlignment="Center" HorizontalAlignment="Right" 
               FontSize="24" MouseLeftButtonUp="FeedName_MouseLeftButtonUp" />
</Grid>

When the orientation changes of the page the listbox of Feedcontrol items is on I want the feed name textblock to change to the correct size (560px for landscape, 360px for portrait) so I assumed by setting the grid column width to "*" or "Auto" and setting no width for the textblock it would automatically resize but it only resizes to the width of it's text and not the full width.

So then I tried setting the textblock to the default portrait size (360) in the XAML and on the page orientation change event I call the following Method in each instance of the FeedControl currently in the ListBox:

    public void ChangeOrientation(bool isLandscape)
    {

        if (isLandscape)
        {
            this.LayoutRoot.Width = App.LandscapeWidth;     //700
            this.FeedName.Width = App.LandscapeItemWidth;   //560
        }
        else
        {
            this.LayoutRoot.Width = App.PortraitWidth;      //480
            this.FeedName.Width = App.PortraitItemWidth;    //360
        }
        this.InvalidateArrange();
        this.InvalidateMeasure();
    }

However, this doesn't work either (no matter what I try) so I am confused about how best to do this... I know there must be a really simple way but so far I've not found it.

Can anybody point me in the right direction please?

Mike

PS sorry for the length of the post... so long for such a simple problem!!

William Melani William Melani · Accepted Answer · 2011-05-26T06:34:38

You should set the HorizontalAlignment and HorizontalContentAlignment to HorizontalAlignment.Stretchfor the ListBoxItems which have your control. In addition, set the design width/design height of your control.

Here's an example of one of my controls I have in a listbox, that stretches in landscape mode.

<UserControl x:Class="SabWatch.Resources.Controls.ProgressBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot" Style="{StaticResource AppBackgroundStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

    </Grid>
</UserControl>

And here's an example of setting the alignment properties in code. you can also do this in XAML (and possibly using a style and giving the ListBox a ItemContainerStyle)

var lbi = new ListBoxItem();
            var box = new ProgressBox();
...
            lbi.Tag = queueObject;
            lbi.Content = box;
            lbi.HorizontalAlignment = HorizontalAlignment.Stretch;
            lbi.HorizontalContentAlignment = HorizontalAlignment.Stretch;

WP7 usercontrol - change control width when orientation changes

2 Answers