Question

我的项目中有这个架构，我试着让它响应，

<Grid >
    <Grid.ColumnDefinitions>
         <ColumnDefinition Width="auto" />
         <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
         <RowDefinition Height="49" />
         <RowDefinition Height="auto" />
         <RowDefinition Height="auto" />
    </Grid.RowDefinitions>

     <Grid Grid.Row="0"  Grid.ColumnSpan="2">
     </Grid>

     <Grid Grid.Row="1" Grid.Column="0">
     </Grid>


     <Grid Grid.Row="2"  Grid.Column="0">
     </Grid>

     <Grid Grid.Column="1"  Grid.Row="1">
    </Grid>

     <Grid Grid.Column="1"  Grid.Row="2">
    </Grid>
</Grid>

当我调整屏幕大小但是它不起作用时，我使用了触发器和StackPanel将方向从水平更改为垂直方向:( 任何好的解决方案请做像我们做的那样的东西！谢谢你的帮助

Answer 1

由于OP没有触发器代码。看看Channel 9 video of Hero Explorer by Bob Tabor。在这里，他处理了一个类似的场景，从垂直到水平的布局，通过视频和代码，您将获得有关如何处理触发的基本想法。
以下是来自HeroExplorer的代码来处理调整大小，类似的是你也可以在代码中执行此操作

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DetailGrid.(Grid.Row)" Value="0" />
                        <Setter Target="DetailGrid.(Grid.Column)" Value="1" />
                        <Setter Target="ColumnOne.Width" Value="Auto" />
                        <Setter Target="ColumnTwo.Width" Value="*" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DetailGrid.(Grid.Row)" Value="1" />
                        <Setter Target="DetailGrid.(Grid.Column)" Value="0" />
                        <Setter Target="ColumnOne.Width" Value="*" />
                        <Setter Target="ColumnTwo.Width" Value="Auto" />

                    </VisualState.Setters>
                </VisualState>                
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ScrollViewer>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="ColumnOne" Width="Auto" />
                    <ColumnDefinition x:Name="ColumnTwo" Width="*" />
                </Grid.ColumnDefinitions>




                <!-- Detail Grid -->
                <Grid Name="DetailGrid" Grid.Column="1" Grid.Row="0" Margin="10,0,10,0">

如何在通用应用程序中像Bootsrap一样垂直设置多个网格

1 个答案: