带有UniformGrid图像的WPF ItemsControl.ItemsPanel - 为什么UG溢出父级？ [英] WPF ItemsControl.ItemsPanel with UniformGrid of images - why does UG overflow parent?

问题描述

任何帮助赞赏..提取下面。 UniformGrid旨在显示不同数量的图像。这样做但图像大小不会调整大小，以便所有图像都可以在父网格内显示。出于某种原因，UniformGrid似乎在网格底部溢出。我希望我做错了吗？



谢谢

Kevin

Any help appreciated.. extract below. UniformGrid is intended to display a varying number of images. This it does but the image sizes DO NOT resize so that all the images can display inside the parent Grid. For some reason the UniformGrid seems to 'overflow' across the bottom of the Grid. I hope I am doing something obvious wrong?

Thanks
Kevin

  <Grid Margin="5">
    <Grid.RowDefinitions>
      <RowDefinition Height="30"/>
      <RowDefinition Height="70"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

<Border Grid.Row="2" Grid.ColumnSpan="2" Name="borderAnswers" >
    <!--  This is the Answer List Grid ............................................................................-->
    <ItemsControl Grid.Row="2" Grid.ColumnSpan="2" Name="AnswerPanel" ItemsSource="{Binding}">
      
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <UniformGrid Rows="{Binding Source={StaticResource objImageRows}}"

                       Columns="{Binding Source={StaticResource objImageCols}}" 

                       removed="#76F2ECEC">
          </UniformGrid> 
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      
       <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Border Name="BorderAnswer" BorderThickness="2" BorderBrush="White" 

                  Margin="5" removed="Gray"

                  Style="{StaticResource CellHighlight}">
            
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Name="RowAnswerID" Height="10"></RowDefinition>
                <RowDefinition Name="RowAnswerText" Height="50"></RowDefinition>
                <RowDefinition Name="RowAnswerImage" Height="*"></RowDefinition>
              </Grid.RowDefinitions>
              <TextBlock Grid.Row="0" Name="imgID" Text="{Binding Path=AnswerID}" 

                         FontSize="10" Foreground="White"/>
              <TextBlock Grid.Row="1" Name="imgText" Text="{Binding Path=AnswerText}" 

                         Style="{StaticResource TextBlockStyleAnswers}"/>
              <Image Grid.Row="2"  Name="nameImagePath" Source="{Binding Path=AnswerImagePath}" 

                     Margin="0" Stretch="Fill" 

                     HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" 

                     ClipToBounds="True"/>
            </Grid>
          </Border>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
</Border>
</Grid>

推荐答案

看起来这到底是我自己的错误！我正在设置UniformGrid行和列，以便显示所有图像项的单元格太少。看起来WPF首先在窗口中创建UniformGrid，其中我指定的单元格数占用了完整的父边框区域。然后它会尝试显示比单元格更多的图像，因此它会在父边框外添加一些单元格。很好的尝试！



不能责怪WPF，除了它可能已经报告了这个问题。



感谢您的帮助谢尔盖

Looks like this was my own mistake in the end! I was setting the UniformGrid rows and columns so that there were too few cells to display all the image items. Looks like WPF creates the UniformGrid in the window first with the number of cells I designate taking up the full parent border area. Then it tries to display more images than it has cells so it adds some cells outside the parent border. Good try!

Can't blame WPF for this one other than it could have reported the issue I guess.

Thanks for the help Sergey

不是一个完整的答案，只是与您的第一个问题相关的想法：要显示可扩展的图像，您可以使用 Viewbox ：

http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox%28v=vs.110%29.aspx [ ^ ]。



此外，你应该确保视图框的大小是在外部定义的，但是包含元素的大小。此外，我强烈建议在几乎所有情况下使用矢量图形，而不是像素图形。您可以创建SVG图形并将其转换为XAML。矢量图形平滑地缩放，没有像素化。替代方案是您自己的视觉效果渲染。

-SA

Not a complete answer, just the idea related only to the first of your problems: to show scalable images, you can use Viewbox:
http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox%28v=vs.110%29.aspx[^].

Besides, you should make sure that the size of the view box is defined externally, but the size of containing element. Also, I would strongly advise to use vector graphics in nearly all cases, instead of pixel graphics. You can create, say, SVG graphics and convert it to XAML. Vector graphics scales smoothly, without pixellation. The alternative is your own rendering of visuals.

—SA

这篇关于带有UniformGrid图像的WPF ItemsControl.ItemsPanel - 为什么UG溢出父级？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！