如何在xaml中剪切图像并限制图像宽度? (WinRT的)

时间:2013-02-16 15:24:16

标签: c# .net xaml windows-runtime

我有一个可以通过api设置的图像,我希望图像在宽度超过250像素时被剪裁。这很有效。但是,图像与一些文本块一起位于堆栈面板中。即使我们看到的图像被剪裁,实际图像宽度仍然超过250像素。

这是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>

因此,假设图像宽度为2000像素。然后,图像后的文本块将被推离屏幕,但只能看到250像素的图像。

有什么建议吗?

2 个答案:

答案 0 :(得分:2)

看起来我采取了错误的做法。我能够使用滚动查看功能实现我想要的功能。

<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>

答案 1 :(得分:1)

您可以设置边框的宽度和高度,并将“图像拉伸”设置为“无”,并避免使用较重的ScrollViewer。