如何在xaml中剪切图像并限制图像宽度？ （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

您可以设置边框的宽度和高度，并将Image Stretch设置为None，并避免使用较重的ScrollViewer。

Answer 3

I've tried @FilipSkakun's answer and it worked very well, with one adjustment: I put Image.Stretch to UniformToFill .

I'm posting my code here, as it may help someone:

<Border Width="30" Height="30">
    <Border.Clip>
        <EllipseGeometry RadiusX="15" RadiusY="15" Center="15,15" />
    </Border.Clip>
    <Image Source="..." VerticalAlignment="Center" MaxWidth="30" Stretch="UniformToFill" />
</Border>

Plus, I can control the image positioning by the VerticalAlignment property.