如何裁剪xaml中的圖像並限制圖像寬度？（Winrt）

我有一個可以通過api設置的圖像，我希望圖像在寬於250像素時被剪裁。那是有效的。但是，圖像與一些文本塊一起位於堆疊面板中。即使我們看到的圖像被裁剪，實際的圖像寬度仍然超過250像素。如何裁剪xaml中的圖像並限制圖像寬度？（Winrt）

這裏是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像素的圖像可見。

有什麼建議嗎？

來源

2013-02-16 Smeegs

你有沒有解決這個問題？我有同樣的問題。 – Carlo 2013-02-20 22:28:59

是的，我放棄了裁剪並使用了滾動查看器。如果您禁用滾動，那麼它會剪切圖像並保持您爲scrollviewer設置的任何尺寸。如果有人試圖滾動它們的圖像，我實際上將滾動看不見。我粘貼下面的代碼。 – Smeegs 2013-02-21 13:46:53

看起來我正在採取錯誤的做法。我能夠使用scrollviewer禁用滾動來實現我想要的效果。

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

來源

2013-02-16 16:19:51 Smeegs

您可以只設置寬度和邊框的高度和設置圖像拉伸到無，避免使用笨重的ScrollViewer。

來源

2013-02-16 19:32:20

這對我不起作用，因爲圖像的高度不是保證的50 px。這是我需要的高度。所以圖像必須根據高度均勻拉伸。將「拉伸」設置爲「無」只會剪裁圖像的高度和寬度。 – Smeegs 2013-02-16 21:55:33

那麼，但你仍然可以將邊框剪裁到邊界，並讓邊框內的圖像比邊框更大。 – 2013-02-16 22:28:09

我也試過，它完全沒有效果。 – Smeegs 2013-02-17 04:20:40

我試了@ 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財產的形象定位。

來源

2016-04-10 22:03:03 Dinei

如何裁剪xaml中的圖像並限制圖像寬度？ （Winrt）

回答

相關問題

如何裁剪xaml中的圖像並限制圖像寬度？（Winrt）