2016-10-17 24 views
0

我试图把另一个旁边的图像,然后在下面也是同样的模式在上述enter image description here试图保持图像彼此旁边,UWP

代码我试图为如下

<Grid Name="mainGridView"> 
    <Grid.Background> 
     <ImageBrush ImageSource="Assets/info_bg.png"/> 
    </Grid.Background> 
    <Grid.RowDefinitions> 
     <RowDefinition x:Name="rowDefSubjectHeadingGrid" Height="1*"/> 
     <RowDefinition x:Name="rowDefSubjectListGrid" Height="4.4*"/> 
     <RowDefinition x:Name="rowDefButtonGrid" Height="1*"/> 
    </Grid.RowDefinitions> 
    <Grid Grid.Row="0" Background="#339FFE"> 
     <Image Source="Assets\back_bg.png" HorizontalAlignment="Left" Stretch="Fill" Width="33" Height="33" 
       Margin="10,0,0,0"/> 
     <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="120,1,0,0" Foreground="White" 
        Text="Class" FontSize="29" FontStyle="Normal"/> 
     <Image Source="Assets\ic_selected_class_box.png" HorizontalAlignment="Center" Stretch="Fill" Width="30" Height="30" 
       Margin="45,7,0,0"/> 
     <Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Margin="42,-12,0,0"> 
      <TextBlock Text="I" /> 
     </Canvas> 
     <Image Source="Assets\ic_setting.png" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="Uniform" Width="50" Height="50" 
       Margin="0,1,15,0"/> 
    </Grid> 
    <Grid x:Name="ImageGrid" Grid.Row="1">    

     <ScrollViewer VerticalScrollBarVisibility="Auto"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
       </Grid.ColumnDefinitions> 

       <Image Grid.Row="0" Grid.Column="0" Source="Assets/ic_eye_icon.png" Width="179"/> 
       <Image Grid.Row="1" Grid.Column="0" Source="Assets/ic_eye_icon.png" Width="179"/> 
       <Image Grid.Row="0" Grid.Column="1" Source="Assets/ic_eye_icon.png" Width="179"/> 
       <Image Grid.Row="1" Grid.Column="1" Source="Assets/ic_eye_icon.png" Width="179"/> 
      </Grid> 
     </ScrollViewer> 
    </Grid> 
    <Grid Grid.Row="2" Background="#339FFE"> 
    </Grid> 
</Grid> 

以上是我努力,你可以在这里查看

+0

你是什么意思“在旁边,然后在下面”?你只是想要一个完全像图片一样的布局? –

+0

是完全一样的图片 – pariwesh07

回答

0

既然你想有一个网格布局,只使用一个网格2行2列代码的全格式:

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 

     <Image Grid.Row="0" Grid.Column="0" Source="Assets/StoreLogo.png"/> 
     <Image Grid.Row="1" Grid.Column="0" Source="Assets/StoreLogo.png"/> 
     <Image Grid.Row="0" Grid.Column="1" Source="Assets/StoreLogo.png"/> 
     <Image Grid.Row="1" Grid.Column="1" Source="Assets/StoreLogo.png"/> 
    </Grid> 
</ScrollViewer> 

Screenshot

+0

其确定,但我也想让它垂直滚动 – pariwesh07

+0

然后将其包装在ScrollViewer中。 –

+0

我也一样,但它给出了错误..'属性内容只能设置一次' – pariwesh07