Question

我觉得我可能需要一些转换器，但这就是我想要做的。我想要一个Image控件（因为它在一个绑定到实际数据的数据模板中），并带有以下参数。

居中于90x90的空间（没有任何拉伸）。
具有半径为40像素（水平和垂直）的圆形剪裁。
如果图像是＆gt; 90x90，它应位于90x90空间内，并从中间夹一个40x40圆圈。
如果图像是＆lt; 90x90，它应位于90x90空间内。裁剪圆应该没有效果，因为整个图像都包含在剪辑区域内。

我的XAML代码如下。这对于精确90x90的图片（即它们不拉伸，它们使图像居中并且裁剪工作）正如预期的那样工作。对于图像＆gt; 90x90，裁剪工作正常，但图像没有居中。对于图像＆lt; 90x90，图像居中，但剪辑似乎将图像放在图像内容的左上角区域，因此剪辑会剪切图像的左上角部分。

<Style x:Key="ImageStyle">
    <Setter Property="Width" Value="90" />
    <Setter Property="Height" Value="90" />
    <Setter Property="Stretch" Value="None" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Clip">
        <Setter.Value>
            <EllipseGeometry Center="45,45" RadiusX="40" RadiusY="40" />
        </Setter.Value>
    </Setter>
</Style>

<Grid>
    <!-- Other Stuff -->
    <Image Source="{Binding ImagePath}" Style="{StaticResource ImageStyle}" />
</Grid>

我可以通过在网格中包装并在那里移动剪辑来摆脱第二个问题（小图像剪辑），但是大的东西不会居中：

<Grid>
    <!-- Other Stuff -->
    <Grid Width="90" Height="90">
        <Grid.Clip>
            <EllipseGeometry Center="45,45" RadiusX="40" RadiusY="40" />
        </Grid.Clip>
        <Image Source="{Binding ImagePath}" Style="{StaticResource ImageStyle}" />
    </Grid>
</Grid>

Answer 1

我最终不得不从图像样式中删除宽度和高度属性。使用WPF Snoop查看它，图像现在比包含的网格更大，但由于网格具有固定的大小，因此它以此为中心。

<Style x:Key="ImageStyle">
    <Setter Property="Stretch" Value="None" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
</Style>

<Grid>
    <!-- Other Stuff -->
    <Grid Width="90" Height="90">
        <Grid.Clip>
            <EllipseGeometry Center="45,45" RadiusX="40" RadiusY="40" />
        </Grid.Clip>
        <Image Source="{Binding ImagePath}" Style="{StaticResource ImageStyle}" />
    </Grid>
</Grid>

Answer 2

我发现中心和剪辑和图像的最简单方法是使用不同的元素，例如矩形，然后用ImageBrush填充它。例如：

<Rectangle>
    <Rectangle.Fill>
        <ImageBrush
            ImageSource="{Binding SomeUriPropertyOrOther}"
            Stretch="UniformToFill"/>
    </Rectangle.Fill>
</Rectangle>

这确实是居中和裁剪。（拉伸无关= =填充和制服，我想。）

Answer 3

在Datatemplate中使用ImageBrush。然后你可以画成椭圆，而不是使用剪辑。

<强> XAML

  <Grid>
    <ListBox ItemsSource='{Binding}'>
      <ListBox.ItemTemplate>
        <DataTemplate>

          <Grid Width='90' Height='90' Background='Yellow'>

          <Ellipse Width='40'
                   Height='40'>
            <Ellipse.Fill>
              <ImageBrush ImageSource='{Binding ImagePath}'
                          Stretch='None' />
            </Ellipse.Fill>

          </Ellipse>
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

代码

public partial class Window4 : Window {
    public Window4() {
      InitializeComponent();

      var data = new List<DemoData>();
      data.Add(new DemoData { Header="Large Image", ImagePath="flower.png"});
      data.Add(new DemoData { Header = "Medium Image", ImagePath = "flower_med.png" });
      data.Add(new DemoData { Header = "Small Image", ImagePath = "flower_small.png" });
      this.DataContext = data;
    }
  }

  internal class DemoData {
    public string Header { get; set; }
    public string ImagePath { get; set; }
  }

<强>结果

ListBox with ellipses

具有居中和剪裁的WPF图像主机

3 个答案: