WPF ItemsControl Datattemplate动态更新

Question

I'm new in WPF technology and I would like to ask about possibility of solving of my problem.

I have ItemsControl where I add images:

<ItemsControl  Name="itemscontrol1" 
    ItemsSource="{Binding Path=PicturesList}" ItemTemplate="{StaticResource pictureTemplate}" Grid.Column="1" />

And then I have prepare Datatemplate:

        <DataTemplate x:Key="pictureTemplate"> 

        <DataTemplate.Resources>

            <Style TargetType="Image">

                <Setter Property="Width" Value="180" />

                <Setter Property="Height" Value="120" />

                <Setter Property="Margin" Value="10" />

            </Style>
        </DataTemplate.Resources>

        <Image Source="{Binding Path=Location}" />
    </DataTemplate>

My problem is that I don't know how I can dynamically change parametrs of image width and height. For example, when I change size of window, i need change size of images inside item control.

Could someone help me?

Thank you for advice and tips. Smith

Answer 1

If your controlling the size of the image based on the rest of the UI, ie Window size you should avoid setting them to explicit values and opt for a layout panel which takes care of this for you. Such as making the controls items panel a wrappanel layout.

  <ItemsPanelTemplate x:key="griditemtemplate">
    <WrapPanel VerticalAlignment="Center"
          HorizontalAlignment="Center"/>
  </ItemsPanelTemplate>

If there is something in your view model that dictates the size, use a binding.

To do what you want specifically, you would need a uniform grid and be able to bind the number of columns to collection count. Unfortunately this can't be done to my knowledge.

As such, I'd create a custom layout panel. Lots of tutorials available online , but basically create a class that extends Panel and then override MeasureOverride and ArrangeOverride methods. The important one being Measure...

protected override Size ArrangeOverride(Size finalSize)
{
    int i = 0;
    foreach( UIElement child in InternalChildern)
    {
        var r = new Rect(this.ActualSize / this.InternalChildren.count * i, 0, this.ActualSize / this.InteralChildren.Count, finalSize.Height);
        child.Arrange( r );
        i++;
    }
}

This is approximate code written on my phone so apologies if needs refactoring.

Then use this panel as your ItemsPanel template as shown before.