在xaml Grid列中放置小部件

本文关键字：小部 xaml Grid | 更新日期: 2023-09-27 18:14:00

嗨，我把手机屏幕分成三行，第二行分成两列。我试图将图像添加到第二行的第二列。虽然我指定Grid。行和网格。列的图像属性，它不起作用。你能告诉我如何在不同的行和列中添加小部件吗?

非常感谢您的帮助。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>                
        </Grid.ColumnDefinitions>
    </Grid>
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="0"
        Source="Assets/b_placeholder.jpg"/>
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="2"
        Source="Assets/b_placeholder.jpg"/>
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="1"
        Grid.Column="1"
        Source="Assets/b_placeholder.jpg"/>
</Grid>

在xaml Grid列中放置小部件

不能仅在一行内定义列。

您可以在该行中创建一个仅包含列的新网格:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>   
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="0"
        Source="Assets/b_placeholder.jpg"/>
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>                
        </Grid.ColumnDefinitions>
        <Image
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Width="100"
            Height="100"            
            Grid.Column="1"
            Source="Assets/b_placeholder.jpg"/>
    </Grid>
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="2"
        Source="Assets/b_placeholder.jpg"/>
</Grid>

或者你处理第一个和第三个图像的columnspan:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>  
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>                
    </Grid.ColumnDefinitions> 
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="0"
        Grid.ColumnSpan="2"
        Source="Assets/b_placeholder.jpg"/>
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"  
        Grid.Row="1"          
        Grid.Column="1"
        Source="Assets/b_placeholder.jpg"/>
    <Image
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="100"
        Height="100"
        Grid.Row="2"
        Grid.ColumnSpan="2"
        Source="Assets/b_placeholder.jpg"/>
</Grid>
相关文章：