[英]How do I clip an image in xaml and limit the image width? (Winrt)
我有一个可以通过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像素的图像。
有什么建议?
看起来我采取了错误的做法。 我能够使用滚动查看器来禁用滚动来实现我想要的效果。
<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>
您可以设置边框的宽度和高度,并将Image Stretch设置为None,并避免使用较重的ScrollViewer。
我已经尝试了@ FilipSkakun的答案并且它运行良好,只进行了一次调整:我将Image.Stretch
放到UniformToFill
。
我在这里发布我的代码,因为它可以帮助某人:
<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>
另外,我可以通过VerticalAlignment
属性控制图像定位。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.