創作世界のいろいろ〜AdobeとかC#とか

絵を描く人がC#とか3Dとか動画編集とかやる為の備忘録

【MAUI】Gridレイアウトを入れ子にしてレイアウトを保持する

Gridレイアウトの中にGridレイアウトをさらに入れて、ウィンドウの伸縮があっても構成がくずれないようにする。

↑この右下三つのセパレートが 入れ子部分

 

今回はGridだけなので、.XAMLのみに記述すれば良いです。

   
      <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="120"/>
            <ColumnDefinition  Width="*" />
        </Grid.ColumnDefinitions>
   
        <BoxView Color="Black"
                 Grid.RowSpan="3" Grid.Column="0"/>
        <Label Text="Matsrika" TextColor="White" Margin="0,240" Grid.RowSpan="3" Grid.Column="0" FontAttributes="Bold" FontSize="Large"/>
        <Label Text="Graphics" TextColor="White" Margin="0,280" Grid.RowSpan="3" Grid.Column="0" FontAttributes="Bold" FontSize="Large"/>

        <BoxView Color="Gray"
                 Grid.Row="0" Grid.Column="1"/>
        <BoxView Color="LightGray"
                 Grid.Row="1" Grid.Column="1"/>

      <!--入れ子部分のGrid。GridタグにGridの指定をする-->
      <Grid Grid.Row="2" Grid.Column="1" BackgroundColor="SlateGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="*"/>
            <ColumnDefinition  Width="*" />
            <ColumnDefinition  Width="*" />
        </Grid.ColumnDefinitions>

        <BoxView Margin="30"
                Color="AliceBlue"
                 Grid.Column="0"/>
        <BoxView Margin="5,40"
                Color="AliceBlue"
                 Grid.Column="1"/>
        <BoxView Margin="30,50"
                Color="AliceBlue"
                 Grid.Column="2"/>
       </Grid>
      <!--入れ子部分のGrid終わり-->
    </Grid>