C# UWP rozmieszczenie siatki

Question

Witam. :)
Mam pewien problem z rozmieszczeniem siatki w UWP. Mam do napisania prosty projekt, lecz problemem jest rozmieszenie siatki tak aby w jednym wierszu można było zawrzeć 5 kolumny. A u mnie jest tak ,że mam 4 wiersze i te 4 wiersze są dzielone przez 5 kolumn. Zamiast podzielić tylko tą jedną. Wrzucam tutaj zdj poglądowe "projektu".

kod:

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid Margin="10,10,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
        </Grid>

    </Grid>
</Page>

 

Answer 1

Cześć, 

Widzę dwa rozwiązania.

1) Pierwszego grida dzielisz na same rzędy:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid Margin="10,10,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
</Grid>

i w niego wrzucasz kolejnego grida który dzielisz na 5 kolumn:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid Margin="10,10,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

       <Grid Grid.Row=1>
              <Grid.ColumnDefinitions>
                   <ColumnDefinitions Width="*"/>
                   <ColumnDefinitions Width="*"/>
                   <ColumnDefinitions Width="*"/>
                   <ColumnDefinitions Width="*"/>
                   <ColumnDefinitions Width="*"/>
              </Grid.ColumnDefinitions>

              //Tutaj kod w rzędzie który jest podzielony na 5 kolumn

        </Grid>

</Grid>

2) Masz jednego grida ale w rzędach kontrolki rozciągasz  na pozostałe kolumny za pomocą 'columnspan':

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid Margin="10,10,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        </Grid>
 
        //TextBox rozdziągnięty na 5 kolumn w pierwszym rzędzie
        <TextBox Grid.ColumnSpan="5"/>

    </Grid>

3) Jak dzielisz grid na kolumny o jednakowych proporciach nie wpisuj 2* bo to nie ma sensu.

Comments

Dziękuję za odpowiedz, użyłem 1 sposobu. :D