将小部件放置在 xaml Grid 列中答案

【问题标题】：placing widgets in xaml Grid column将小部件放置在 xaml Grid 列中
【发布时间】：2015-09-21 18:09:02
【问题描述】：

您好，我将手机屏幕分为三行，第二行分为两列。我正在尝试将图像添加到第二行的第二列。尽管我为图像属性指定了 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>

【问题讨论】：

标签： c# wpf xaml window

【解决方案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>

或者您处理第一张和第三张图片的列跨度：

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

【讨论】：

@Rao 如果这回答了你的问题，你能把它标记为答案吗？谢谢！