Как использовать Row и RowSpam на экранах XAML - PullRequest
Новая
       5

Как использовать Row и RowSpam на экранах XAML

0 голосов
/ 05 марта 2019

Код, который я буду использовать
Строка и диапазон строк используют эту страницу, но я ожидаю, что диапазон строк в значении начинается с нулевого индекса и заканчивается в rowspan = "3" 

<Grid Grid.Row="3" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Source="/Resources//Others/5.png" Margin="2 2 0 0" Stretch="Fill"/>
            </Grid>
            <Grid Grid.RowSpan="3" Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="65*"/>
                    <RowDefinition Height="68*"/>
                </Grid.RowDefinitions>
                <Image Grid.RowSpan="2" Source="/Resources//Others/6.png" Stretch="UniformToFill" Margin="0,2,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
            </Grid>
            <Grid Grid.RowSpan="3" Grid.Column="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Grid.RowSpan="3" Grid.Column="3" Source="/Resources//Others/6.png" Margin="2 2 0 0" Stretch="UniformToFill" />
            </Grid>
        </Grid>

Экран вывода вот так

Output Screen

Но я ожидал этого

Expected Screen

1 Ответ

0 голосов
/ 06 марта 2019

Как использовать Row и RowSpam на экранах XAML

Для понимания этого вы можете создать сетку из 3 столбцов и 3 строк, как показано ниже. 

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

Если вы хотите занять два позади целых столбцов. вам нужно установить RowSpan как 3, а затем установить Column, который вы хотите запустить. 

<Rectangle Fill="LightCyan" Grid.RowSpan="3" Grid.Column="1"/>
<Rectangle Fill="LightGreen" Grid.RowSpan="3" Grid.Column="2"/>

enter image description here

Ниже приведен полный код xaml. 

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

    <Rectangle Fill="Red" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Gray" Grid.Column="0" Grid.Row="1"/>
    <Rectangle Fill="BlueViolet" Grid.Column="0" Grid.Row="2"/>


    <Rectangle Fill="LightCyan" Grid.RowSpan="3" Grid.Column="1"/>
    <Rectangle Fill="LightGreen" Grid.RowSpan="3" Grid.Column="2"/>

</Grid>
...