图像被拉伸并居中显示？

Question

我有以下的XAML代码：

<Image Source="a.jpg" HorizontalAlignment="Center"  VerticalAlignment="Center" Stretch="Uniform"/>

我得到了这个：

(http://img810.imageshack.us/img810/2401/imagestretchuniform.png)

使用 Stretch="None"，我得到了这个：

(http://img28.imageshack.us/img28/1783/imagestretchnone.png)

现在，我想用 Stretch="Uniform" 在垂直或水平方向上居中图片！只有“最小”的一边（使用 Uniform）将被居中。但是，目前如您在截图中所看到的那样，在使用 HorizontalAlignment 和 VerticalAlignment 定义为 "Center" 后，图片仍然只是放置在左上角。

我应该怎么做呢？

整个代码如下：

<UserControl [...]>
    <Canvas Width="640" Height="480" Background="#FF881607">
        <Image Source="a.jpg" HorizontalAlignment="Center"  VerticalAlignment="Center" Stretch="Uniform"/>
    </Canvas>
</UserControl>

- Guillaume Slashy

---

你能否也发布一下周围的Xaml代码？也许图片的父级元素没有居中或拉伸。 - Botz3000

Answer 1

如果您将其放在网格中，它将自动居中。

<Grid>
    <Image Source="a.jpg"/>
</Grid>

更多网格控制：

<UserControl>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Image Source="a.jpg" Stretch="Uniform"/>
        </Grid>
        <Grid Grid.Row="1" Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="Start"/>
            <Button Grid.Column="2" Content="Stop"/>
        </Grid>
    </Grid>
</UserControl>

- Clemens

Answer 2

Canvas不支持图像的HorizontalAlignment。如果你想要这样的动态布局，那么使用Canvas是一个不好的选择（除非你想要实际忽略这种布局）。使用Canvas的确切原因是什么？
直接使用Grid即可：

<Grid Background="#FF881607">
    <Image Source="a.jpg" HorizontalAlignment="Center"  VerticalAlignment="Center" Stretch="Uniform"/>
</Grid>

- Botz3000

Answer 3

                 <Border Width="X" Height="X" HorizontalAlignment="Center">
                    <Border.Background>
                        <ImageBrush ImageSource="{Binding X}" Stretch="UniformToFill"/>
                    </Border.Background>
                </Border>

- Tatyana

Answer 4

您可以将图像分配给 ImageBrush，然后将该刷子设置为控件或其他元素的 Background（例如 Rectangle 的 Fill）。

ImageBrush 具有 Stretch 属性，但也具有 AlignmentX 和 AlignmentY 属性。默认情况下，这两个属性都设置为 Center。

<Window x:Class="StackOverflow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="/logo-stackoverflow.png" Stretch="Uniform" />
        </Grid.Background>
    </Grid>
</Window>

我发现的唯一问题是，随着图像缩小，它似乎变得非常锯齿状。我不确定这是为什么。

- Steven Rands