none
Изменение разметки при изменении ширины окна RRS feed

  • Вопрос

  • Коллеги, второй день пытаюсь научиться менять разметку приложения при использовании разных размеров окна. Никак не получается. Делаю по этой статье, только на своем примере.

    Вот такая разметка

    <Page>
        <Page.Resources>...</Page.Resources>
        <Page.DataContext>...</Page.DataContext>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Text="Bash.im: Новые"
                       Style="{StaticResource HeaderTextBlockStyle}"
                       Margin="5" />
            <ListView Grid.Row="1"
                      AutomationProperties.AutomationId="DefaultListView"
                      x:Name="DefaultListView"
                      Margin="12"
                      ItemsSource="{Binding BashItems}"
                      ItemsPanel="{StaticResource ItemPanelDataTemplate}" SelectionMode="None"
                      ItemTemplate="{StaticResource DefaultListViewItemTemplate}"
                      Tapped="DefaultListView_OnTapped">
                <ListView.ItemContainerTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition />
                    </TransitionCollection>
                </ListView.ItemContainerTransitions>
            </ListView>
            <ListView Grid.Row="1"
                      AutomationProperties.AutomationId="_750PxListView"
                      x:Name="Px750ListView"
                      Margin="12"
                      ItemsSource="{Binding BashItems}"
                      ItemsPanel="{StaticResource ItemPanelDataTemplate}" SelectionMode="None"
                      ItemTemplate="{StaticResource Px750ListViewItemTemplate}"
                      Visibility="Collapsed">
                <ListView.ItemContainerTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition />
                    </TransitionCollection>
                </ListView.ItemContainerTransitions>
            </ListView>
            <ListView Grid.Row="1"
                      AutomationProperties.AutomationId="_500PxListView"
                      x:Name="Px500ListView"
                      Margin="12"
                      ItemsSource="{Binding BashItems}"
                      ItemsPanel="{StaticResource ItemPanelDataTemplate}" SelectionMode="None"
                      ItemTemplate="{StaticResource Px500ListViewItemTemplate}"
                      Visibility="Collapsed">
                <ListView.ItemContainerTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition />
                    </TransitionCollection>
                </ListView.ItemContainerTransitions>
            </ListView>
            <ListView Grid.Row="1"
                      AutomationProperties.AutomationId="_320PxListView"
                      x:Name="Px320ListView"
                      Margin="12"
                      ItemsSource="{Binding BashItems}"
                      ItemsPanel="{StaticResource ItemPanelDataTemplate}" SelectionMode="None"
                      ItemTemplate="{StaticResource Px320ListViewItemTemplate}"
                      Visibility="Collapsed">
                <ListView.ItemContainerTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition />
                    </TransitionCollection>
                </ListView.ItemContainerTransitions>
            </ListView>
        </Grid>
        
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="DefaultVisualState">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DefaultListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px750ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px500ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px320ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Px750VisualState">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px750ListView"
                                                       Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DefaultListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px500ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px320ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Px500VisualState" x:FieldModifier="public">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px500ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DefaultListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px750ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px320ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Px320VisualState">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px320ListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DefaultListView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px750ListView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Px500ListView"
                                                       Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Page>

    И такой code-behind

     public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                InitializeComponent();
                this.SizeChanged += MainPage_SizeChanged;
            }
    
            void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                if (e.NewSize.Width < 450)
                {
                    VisualStateManager.GoToState(this, "Px320VisualState", true);
                }
                else if (e.NewSize.Width < 500)
                {
                    VisualStateManager.GoToState(this, "Px500VisualState", true);
                }
                else if (e.NewSize.Width < e.NewSize.Height)
                {
                    VisualStateManager.GoToState(this, "Px750VisualState", true);
                }
                else
                {
                    VisualStateManager.GoToState(this, "DefaultVisualState", true);
                }
    
            }
    }

    Помогите пожалуйста. Заранее благодарю



    14 января 2014 г. 6:23

Ответы

  • Извините, раньше не было возможности посмотреть проект.

    Что бы решить Вашу проблему, просто перенесите весь код с VisualState в xaml в основной грид.

    Т.е. у Вас сейчас так:

    <Page>
    
    <Grid></Grid>
    
    <VisualStateManager.VisualStateGroups>...</
    
    <Page>

    А нужно сделать так:

    <Page>
    
    <Grid>
    
    <other elements></>
    <VisualStateManager.VisualStateGroups>...</
    
    </Grid>
    
    <Page>


    16 января 2014 г. 22:18

Все ответы