Margin and OrientationChanged wp7

Question

I have a listbox with ~20 items.If orientation is portait the margin of the grid must be "140,25,5,0" and width of stackpanel inside 320 If orientation is landscape margin must be "350,25,5,0" and width of stackpanel is 450.How I can change it dinamically such as conversation view in WP7?

   <Grid x:Name="LayoutRoot" >
      <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled"  x:Name="listmy">
        <ListBox.ItemTemplate>
          <DataTemplate>
            <local:TypeMessage  Content="{Binding}">
              <local:TypeMessage.Me>
                <DataTemplate>
                  <Grid HorizontalAlignment="Right" Margin="350,25,5,0">
                    <TextBlock HorizontalAlignment="Right" Margin="0,-25,30,0" TextWrapping="Wrap" Text="Вы" VerticalAlignment="Top"/>
                    <StackPanel Background="{StaticResource PhoneAccentBrush}" Width="320">
                      <TextBlock TextWrapping="Wrap" Foreground="{Binding read_state, Converter={StaticResource ReadConverter}}"  Text="{Binding text}" Margin="5,3" />
                      <TextBlock Text="{Binding date_time}" TextAlignment="Right" Margin="5,0"/>
                    </StackPanel>
                    <Path Data="m 0,0 l 16,0 l 0,16 l -16,-16"
                    Fill="{StaticResource PhoneAccentBrush}"
                    HorizontalAlignment="Right" UseLayoutRounding="False" d:LayoutOverrides="VerticalAlignment, GridBox" Height="16" VerticalAlignment="Top" Margin="0,-15.167,8.757,0" RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <CompositeTransform Rotation="91.157"/>
                        </Path.RenderTransform>
                    </Path>
                  </Grid>
                </DataTemplate>
              </local:TypeMessage.Me>
              <local:TypeMessage.You>
                <DataTemplate>
                  <Grid Margin="5,25,30,0" >
                    <Path Data="m 0,0 l 0,16 l 16,0 l -16,-16"
                    Fill="{StaticResource PhoneAccentBrush}"
                    Margin="9.5,-16,0,0" UseLayoutRounding="False" Height="16" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment" HorizontalAlignment="Left"/>
                    <StackPanel Background="{StaticResource PhoneAccentBrush}" Width="320">
                      <TextBlock TextWrapping="Wrap" Foreground="{Binding read_state,Converter={StaticResource ReadConverter}}"  Text="{Binding text}" />
                      <TextBlock  TextAlignment="Right" Text="{Binding date_time}" />
                    </StackPanel>
                    <TextBlock HorizontalAlignment="Left" Margin="28,-27,0,0" TextWrapping="Wrap" Text="{Binding author_name}" VerticalAlignment="Top"/>
                  </Grid>
                </DataTemplate>
              </local:TypeMessage.You>
            </local:TypeMessage>
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>
    </Grid>

Matt Lacey Matt Lacey · Accepted Answer · 2011-08-08T08:16:35

You could detect the orientation change (in the OnOrientationChanged event) and adjust the margins accordingly.

In terms of working with lots of items.
If items share the same margins you could bind the values and update the VM in the event handler.
If everything has a different margin it may be appropriate to use a different template for each orientation.
Alterntively you could look to move to a more fluid layout. Without seeing what the actual design(s) should be it's not posible to say how suitable this may be though.

Margin and OrientationChanged wp7

1 Answers