Question

I have a Listbox, which is using an ItemTemplate to display an image. I want to be able to change the size of the displayed image in the ItemTemplate. Through databinding I can change the Width, but the only way I can see how to do this is to add a Property (Say, ImageSize) to the class I am binding to and then change every item in the collection to have a new ImageSize. Is there no way to access the property of an item in that Datatemplate?

E.g.

<navigation:Page.Resources>
    <DataTemplate x:Key="ListBoxItemTemplate">            
        <Viewbox Height="100" Width="100">
             <Image Source="{Binding Image}"/>
        </Viewbox>            
    </DataTemplate>        
</navigation:Page.Resources>
<Grid>
    <ListBox ItemTemplate="{StaticResource ListBoxItemTemplate}" ItemSource="{Binding Collection}"/>
</Grid>

Is there anyway to set the Width and Height of the viewbox without binding a property to every element in the collection?

Answer 1

You can use element binding to this. Try something like this:

<UserControl.Resources>        
  <DataTemplate x:Key="ListBoxItemTemplate">            
    <Viewbox Height="{Binding Value, ElementName=slider1}" 
             Width="{Binding Value, ElementName=slider1}">
      <Image Source="{Binding Image}"/>
    </Viewbox>                          
  </DataTemplate>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
  <Grid.RowDefinitions>
    <RowDefinition Height="205*" />
    <RowDefinition Height="95*" />
  </Grid.RowDefinitions>
  <ListBox ItemTemplate="{StaticResource ListBoxItemTemplate}"
           ItemSource="{Binding Collection}"/>
  <Slider x:Name="slider1" Value="100" Maximum="250" Grid.Row="1"/>
</Grid>