在 xaml 网格列中放置小部件

Question

您好，我将手机屏幕分为三行，第二行分为两列。我正在尝试将图像添加到第二行的第二列。尽管我为图像属性指定了 Grid.Row 和 Grid.Column，但它不起作用。您能否指导我如何将小部件添加到不同的行和列。

非常感谢您的帮助。

<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>

Answer 1

您不能只在一行中定义列。

要么在该行中创建一个只有列的新网格：

<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>

或者您处理第 1 和第 3 个图像上的 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>

在 xaml 网格列中放置小部件

placing widgets in xaml Grid column

c#

wpf

xaml

window