将小部件放在xaml Grid列中

时间:2015-09-21 18:09:03

标签: c# wpf xaml window

您好我将移动屏幕划分为三行,第二行划分为两列。我正在尝试将图像添加到第二行的第二列。虽然我将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>

1 个答案:

答案 0 :(得分:0)

您不能仅在一行内定义列。

要么在该行中仅使用列创建新网格:

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