[英]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.