扩展自:不同的屏幕和不同的视图 [英] Expanded from: differen screen and different view

问题描述

扩展问题来自:不同屏幕和不同视图

我想根据屏幕大小更改行和列的网格内容.例如当屏幕宽度大于1000时，一排三个按钮，当屏幕宽度大于600时，两排两个按钮，一个文本框.在其他三行三个文本框中的大小?如何实现?

I want to change the grid content of the row and column based on the screen size. For example when the screen width is more than 1000 one row with three buttons,when the screen width is more than 600, in two row two buttons, one textbox. in others size in three row three textboxes? How to achieve it?

推荐答案

使用 AdaptiveTriggers 更改行号和列号以及控件的可见性

Use AdaptiveTriggers to change the row and column numbers as well visibility of controls

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <!-- VisualState to be triggered when window width is >=1000 effective pixels -->
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1000" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TextBox1.Visibility" Value="Collapsed" />
 <Setter Target="TextBox2.Visibility" Value="Collapsed" />
 <Setter Target="TextBox3.Visibility" Value="Collapsed" />
                    <Setter Target="myButton1.(Grid.Column)" Value="0" />
 <Setter Target="myButton2.(Grid.Column)" Value="1" />
 <Setter Target="myButton3.(Grid.Column)" Value="2" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <!-- VisualState to be triggered when window width is >=600 and <1000 effective pixels -->
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                     <Setter Target="myButton1.(Grid.Row)" Value="0" />
 <Setter Target="myButton2.(Grid.Row)" Value="1" />
 <Setter Target="myButton3.Visibility" Value="Collapsed" />
<Setter Target="TextBox1.(Grid.Row)" Value="2" />
<Setter Target="TextBox2.Visibility" Value="Collapsed" />
 <Setter Target="TextBox3.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>
<VisualState>
                <!-- VisualState to be triggered when window width is >=0and <1000 effective pixels -->
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                     <Setter Target="myButton1.(Grid.Row)" Value="0" />

<Setter Target="TextBox1.(Grid.Row)" Value="0" />
<Setter Target="TextBox2.(Grid.Row)" Value="1" />
<Setter Target="TextBox3.(Grid.Row)" Value="2" />
<Setter Target="myButton2.Visibility" Value="Collapsed" />
 <Setter Target="myButton3.Visibility" Value="Collapsed" />
<Setter Target="myButton1.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
  <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
 <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>


        <Button x:Name="myButton1" Content="MyButton" Width="200"  />
<Button x:Name="myButton2" Content="MyButton" Width="200"  />
<Button x:Name="myButton3" Content="MyButton" Width="200"  />
  <TextBox Text="TextBox content" Width="200" Height="20" x:Name="TextBox1"/>
  <TextBox Text="TextBox content" Width="200" Height="20" x:Name="TextBox2"/>
  <TextBox Text="TextBox content" Width="200" Height="20" x:Name="TextBox3"/>

    </Grid>

这篇关于扩展自:不同的屏幕和不同的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！