Decrease the Image size at runtime

Question

I have List Box with a DataTemplate, in the DataTemplate i have a Image. Below is my code:

<DataTemplate x:Key="DataTemplate">
            <Border  
                    Background="#FFFFFF"
                    Margin="0,2,0,0" 
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch">
           <Grid  Width="Auto"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
         <Image   Style="{StaticResource ImageStyle}"
                  Stretch="UniformToFill"
                  Source="{Binding ImageName}"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  Margin="1,1,1,1"/>
                </Grid>
            </Border>
        </DataTemplate>

My images are Quite big say 1000x1000 but i want to reduce the image size at run time, so that it will look good in the list box item.

How can i acheive this ?

I have tried to add the below code in ImageStyle of Image

<Setter Property="MaxHeight" Value="210"/>
<Setter Property="MaxWidth" Value="210"/>

but it will reduce the View size and not image size, so my images are cutting.

Note: Please note that i am working on Windows Phone 8 application.

Answer 1

I don't fully understand what you mean by

it will reduce the View size and not image size

but it you don't want your image clipped you should set Stretch="Uniform"

Uniform: The content is resized to fit in the destination dimensions while it preserves its native aspect ratio.

and you set it to Stretch="UniformToFill"

UniformToFill: The content is resized to fill the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions .