How do I clip an image in xaml and limit the image width? (Winrt)

Question

I have an image that can get set through an api, I want the image to get clipped when it's wider than 250 px. And that works. However, the image is in a stackpanel along with some textblocks. And even though what we see of the image is clipped, the actual image width remains over 250 px.

Here is the xaml

<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <Button Foreground="Black" Content="Button" x:Name="BackButton" Style="{StaticResource BackButtonStyle}" Visibility="Collapsed" VerticalAlignment="Center" Margin="25,0,0,0"  Click="BackButtonClick" />
                        <Border>
                            <Image x:Name="LogoImage" Source="Images/Logo.png" Height="50"  Margin="15 0 0 0" Stretch="Uniform" VerticalAlignment="Center">
                                <Image.Clip>
                                    <RectangleGeometry Rect="0 0 50 250"></RectangleGeometry>
                                </Image.Clip>
                            </Image>

                        </Border>
                        <TextBlock Foreground="Black" x:Name="NameTextbox" Margin="15, 0, 0, 0" VerticalAlignment="Center" FontSize="26"></TextBlock>

                        <TextBlock VerticalAlignment="Bottom" x:Name="ErrorMessage" Text="Unable to reach server" Foreground="Red" Margin="15 0 0 0"  FontSize="26" FontWeight="Bold" Visibility="Collapsed"></TextBlock>
                    </StackPanel>

So let's say that the image width is 2000 px. Then the textblock after the image will get pushed off of the screen, but only 250 pixels of the image will be visible.

Any advice?

Answer 1

It looks like I was taking the wrong approach. I was able to achieve what I wanted using a scrollviewer with scrolling disabled.

<ScrollViewer MaxWidth="350" HorizontalScrollBarVisibility="Hidden" HorizontalScrollMode="Disabled">
     <Image x:Name="LogoImage" HorizontalAlignment="Left" Source="Images/Logo.png" Height="50" Margin="15 0 0 0" Stretch="Uniform" VerticalAlignment="Center">
     </Image>
</ScrollViewer>

Answer 2

You can just set the width and height of the border and setting Image Stretch to None and avoid using the heavy ScrollViewer.