Question

I have an ListBox UserControl and there is a grid control in the DataTemplate. I used the MVVM to bind the data. For Orientation change, I am able to change the wide of the ListBox, but I don’t find the solution to change the grid column width inside the listbox. Would you help me how to do it or provide a example or link to me. Thanks in advance.

There is my UserControl.xaml

<UserControl x:Class="CMSPhoneApp.QueueListControl"
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"
xmlns:local="clr-namespace:CMSPhoneApp"  >

<UserControl.Resources>       
    <local:VisibilityConverter x:Key="VisibilityConverter"/>
    <local:ColumSpanConverter x:Key="ColumSpanConverter"/>        
</UserControl.Resources>

    <ListBox x:Name="lst" HorizontalAlignment="Left"  Margin="6,6,0,0"  VerticalAlignment="Top" Width="400"    
                  ItemsSource="{Binding Path=MyQueue}"   
                      SelectedItem="{Binding Path=CurrentQueue, Mode=TwoWay}" Height="380" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border BorderThickness="1,1,1,1" BorderBrush="Blue">
                            <Grid x:Name="grd" Width="auto" HorizontalAlignment="Stretch"  >                                  
                                    <Grid.RowDefinitions>                                          
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="35" />
                                        <ColumnDefinition Width="250"/>
                                        <ColumnDefinition Width="125" />
                                    </Grid.ColumnDefinitions>
                                    <Image Source="{Binding Type}" Grid.Row="0" Grid.Column="0"/>
                                    <TextBlock  Grid.Row="0" Grid.Column="1"  Grid.ColumnSpan= "{Binding isSpan, Converter={StaticResource ColumSpanConverter}}" Text="{Binding summary}" TextWrapping="Wrap"
                                             Style="{StaticResource PhoneTextAccentStyle}"  />
                                    <Button x:Name="btnAction" Grid.Row="0" Grid.Column="3" ClickMode="Press" Click="btnAction_Click" Style="{StaticResource ButtonStyle1}"
                                            Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}"
                                         Tag="{Binding callNumber}">

                                        <Button.Content>
                                            <TextBlock Width="85" Height="70" Text="{Binding ActionCaption}" 
                                                       Style="{StaticResource LabelStyle_20}"     />
                                        </Button.Content>
                                    </Button>

                                </Grid>
                                </Border>
                    </DataTemplate>                    

                </ListBox.ItemTemplate>
            </ListBox>

The OrientationChange code:

 private void TestPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
    {
        ListBox lstControl = lst.lst;           
        Grid g = lstControl.ItemContainerGenerator.ContainerFromIndex(0) as Grid;   


        if (e.Orientation.ToString().Contains("Portrait"))                
             lst.lst.Height = 400;


        else                        
        lst.lst.Height = 120;
    }

Answer 1

Instead of absolute values for the column width, you should use percentage or “Star Sizing”. Star sizing allows the width of a column (or height of a row) to grow or shrink as the available size changes.

Here is an example to use:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width=".1*" />
    <ColumnDefinition Width=".6*"/>
    <ColumnDefinition Width=".3*" />
</Grid.ColumnDefinitions>

Along with this you should remove the Width value of the ListBox and allow it to fill all available space.