WPF ItemsControl.ItemsPanel with UniformGrid of images - why does UG overflow parent?

Question

5.00/5 (1 vote)

See more:

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

XML

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

Posted 5-Feb-14 9:11am

kmf

Updated 5-Feb-14 9:19am

Richard C Bishop

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 5-Feb-14 15:21pm

Good question, my 5.
(My first response would be: "because WPF, in certain aspects, sucks" :-)
—SA

kmf 5-Feb-14 15:25pm

Like when you ask an Irish Man for directions and the first response is: "Well if I were you I wouldn't start from here ....!"

I am Irish by the way

Sergey Alexandrovich Kryukov 5-Feb-14 15:43pm

I really answer this way often (because — look at the questions we got here), but this is not such a case...
It's just the opposite case: I cannot see anything fundamentally wrong in your code, but I know that sometimes layout behaves the way you would not expect, and sometimes if looks unreasonable to me. After I discovered and published on this site one very apparent WPF bug, nothing like that surprises me.
—SA

kmf 5-Feb-14 17:13pm

Very true Sergey. Problem was not in the XAML but in the code.

Sergey Alexandrovich Kryukov 5-Feb-14 19:42pm

I would not be so sure... In practice, your problem would be to find some work around...
—SA

Sergey Alexandrovich Kryukov 5-Feb-14 19:43pm

Let me look at your post...
Good that you figured it out...
—SA

2 solutions

Solution 1

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

Posted 5-Feb-14 9:31am

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

kmf · Accepted Answer · 2014-02-05T11:02:00

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