Question

在我的UWP项目中，我有一个页面包含一个4列的网格，这个网格是宽阔的。当屏幕变小（不太宽）时，列被切断（因为它们不在视图中而无法访问）

是否有可能使列包裹（最好是第三和第四列同时）使第三列和第四列位于第一列和第二列之下？

我喜欢硬编码的无价值方法。

注意：我没有必要继续使用网格，如果有一个明显更好的方法，即一个RelativeView我也会这样做

Answer 1

我认为您可以在更改宽度时使用AdaptiveTrigger来更改它。

将Grid更改为WrapGrid或做一些事情以使Grid显示最佳。

要知道什么时候应该使用窄UI，你应该添加一些代码：

<VisualState.StateTriggers>
     <AdaptiveTrigger MinWindowWidth="The min size" />
</VisualState.StateTriggers>

当窗口大小超过最小大小时，它将运行VisualState。

代码如下：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>

            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="narrowView">
            <VisualState.Setters>
                <Setter Target="Grid1.(Grid.RowSpan)" Value="1"></Setter>
                <Setter Target="Grid1.(Grid.ColumnSpan)" Value="2"></Setter>

                <Setter Target="Grid2.(Grid.RowSpan)" Value="1"></Setter>
                <Setter Target="Grid2.(Grid.Row)" Value="1"></Setter>
                <Setter Target="Grid2.(Grid.ColumnSpan)" Value="2"></Setter>
                <Setter Target="Grid2.(Grid.Column)" Value="0"></Setter>
            </VisualState.Setters>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="177*"/>
        <RowDefinition Height="143*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid x:Name="Grid1" Margin="10,10,10,10" Background="Black" Grid.RowSpan="2" ></Grid>
    <Grid x:Name="Grid2" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Margin="10,10,10,10" Background="Black" ></Grid>
</Grid>

另一种方法是使用SizeChange，你应该给网格一个名字，我想把网格命名为Grid。

 <Grid >
    <Grid x:Name="Grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Margin="10,10,10,10" Width="100" Height="100" Background="Black" Grid.RowSpan="2" ></Grid>
        <Grid Grid.Column="1" Grid.Row="0"  Margin="10,10,10,10" Width="100" Height="100" Background="Black" ></Grid>
    </Grid>
    <GridView x:Name="GridView" Visibility="Collapsed">

    </GridView>
</Grid>

我在Initialize中添加了SizeChange。

public MainPage()
{
    this.InitializeComponent();
    SizeChanged += MainPage_SizeChanged;
}

我将添加一个设置最小宽度的属性。

当最小宽度的窗口可以改变Grid1和Grid2的Grid.Row属性时。

    private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (e.NewSize.Width < MinWidht)
    {
        if (_grid)
        {
            _grid = false;

            Grid.Visibility = Visibility.Collapsed;
            var children = Grid.Children.ToList();
            Grid.Children.Clear();

            GridView.ItemsSource = children.ToList();
            GridView.Visibility = Visibility.Visible;
            Grid.Children.Clear();
        }
    }
    else
    {
        if (!_grid)
        {
            // change to GridView to Grid
        }
    }
}

private const double MinWidht = 700;

private bool _grid = true;

请参阅：http://www.c-sharpcorner.com/article/adaptive-grid-view-control-in-uwp-with-xaml-and-c-sharp/

在UWP中，有没有办法让列在彼此之下？

1 个答案: