具有居中和剪切功能的 WPF 图像主机
Posted
技术标签:
【中文标题】具有居中和剪切功能的 WPF 图像主机【英文标题】:WPF image host with centering and clipping 【发布时间】:2014-03-13 03:23:03 【问题描述】:我觉得我可能需要一些转换器,但这是我想做的。我想要一个带有以下参数的 Image 控件(因为它位于绑定到真实数据的数据模板中)。
在 90x90 的空间中居中(没有任何形式的拉伸)。 有一个半径为 40 像素的圆形剪裁(水平和垂直)。 如果图像 > 90x90,则应在 90x90 空间内居中,并从中间剪裁一个 40x40 的圆圈。 如果图像下面有我的 XAML 代码。这适用于正好为 90x90 的图片(即它们不拉伸,它们使图像居中并且剪辑工作)。对于 > 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 中并将剪辑移动到那里来摆脱第二个问题(小图像剪辑),但大的东西不会居中:
<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>
【问题讨论】:
【参考方案1】:在您的数据模板中使用 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;
结果
【讨论】:
【参考方案2】:我最终不得不从图像样式中删除宽度和高度属性。使用 WPF Snoop 查看它,图像现在比包含的 Grid 大,但由于 Grid 具有固定大小,因此它以它为中心。
<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>
【讨论】:
感谢您提供这么好的解决方案【参考方案3】:我发现居中和剪辑图像的最简单方法是使用不同的元素,例如矩形,然后用 ImageBrush 填充它。例如:
<Rectangle>
<Rectangle.Fill>
<ImageBrush
ImageSource="Binding SomeUriPropertyOrOther"
Stretch="UniformToFill"/>
</Rectangle.Fill>
</Rectangle>
这会进行居中和裁剪。 (我猜与 Stretch == Fill 和 Uniform 无关。)
【讨论】:
谢谢!这有帮助以上是关于具有居中和剪切功能的 WPF 图像主机的主要内容,如果未能解决你的问题,请参考以下文章
具有居中 UISlider 和两个图像的自定义 UITableViewCell