5

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 px だとします。次に、画像の後のテキストブロックが画面から押し出されますが、画像の 250 ピクセルのみが表示されます。

何かアドバイス？

4

3 に答える 3

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>
于 2013-02-16T16:19:51.787 に答える
1

境界線の幅と高さを設定し、[画像のストレッチ]を[なし]に設定するだけで、重いScrollViewerの使用を避けることができます。

于 2013-02-16T19:32:20.017 に答える
0

@FilipSkakunの答えを試してみましたが、1つの調整で非常にうまく機能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-10T22:03:03.607 に答える