Question

我必须遵循使用命名程序集和相对URI从资源字典中检索Canvas对象的方法，并将Canvas绑定到MenuItem s Icon。获取矢量图形Canvas的代码是

public Canvas GetVectorGraphic(string assemblyName, string relativeUri, string name)
{
    var imageResourceDictionary = new ResourceDictionary();
    imageResourceDictionary.Source = 
        new Uri(assemblyName + ";component/" + relativeUri, UriKind.Relative)
            ?? new Uri(relativeUri, UriKind.Relative);
    if (imageResourceDictionary.Source == null)
        return default(Canvas);
    return imageResourceDictionary[name] as Canvas;
}

与MenuItem的绑定是

<Style x:Key="MenuItem" TargetType="{x:Type Controls:MenuItemEx}">
    <Setter Property="Icon">
        <Setter.Value>
            <Image Source="{Binding IconSource}" Width="16" Height="16"/>
        </Setter.Value>
    </Setter>
    ...

我也尝试了

<Setter Property="Icon">
    <Setter.Value>
        <Rectangle Width="16" Height="16">
            <Rectangle.Fill>
                <VisualBrush Stretch="Uniform"
                             Visual="{Binding IconSource}"/>
            </Rectangle.Fill>
        </Rectangle>
    </Setter.Value>
</Setter>

您可以看到我正在尝试将Canvas上的高度直接设置为16 x 16，并且还可以通过恢复以填充大小的矩形，但这是失败的 - 它只会导致空白图像。如果我遗漏Height和Width规格，则生成的图形太大。

当我通过

从字典中读取它时，我还尝试调整Canvas的大小

...
Canvas c = imageResourceDictionary[name] as Canvas;
c.Height = 16; 
c.Width = 16;
return c;

但是这会导致图像消失。

如何正确调整Canvas对象的大小以适合我的MenuItem？

修改（部分答案）：

我来过很多帖子，但没有一个能解决我在一篇文章中遇到的所有问题。问题：

未使用矢量图形显示任何图像。 [解决]
显示图像但未正确缩放。 [解决]
缩放和显示图像，但一次只能显示一个。 [解决]
为所有必需的MenuItem缩放并显示Imaged，但知道顶级菜单项具有不需要的边距。 [正在进行]

我如何解决所有问题，但最后一个问题是1.使用正确的矢量图形图像源，在这种情况下我发现填充矩形完成了这项工作。 2.您可以直接绑定到Icon对象以获取图像，但没有真正的方法可以适当地缩放这些图像。 3.您可以使用矩形缩放图像，设置Width和Height并使用VisualBrush填充此图像，但这会使资源在MenuItems之间变形，因此只有一个会永远出现。要使图标不共享，您必须创建静态资源并设置x:Shared="False"。最终的XAML看起来像

<Rectangle x:Key="MenuItemIcon" x:Shared="False" 
           HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
           Width="16" Height="16">
    <Rectangle.Fill>
        <VisualBrush Stretch="Uniform" Visual="{Binding IconSource}"/>
    </Rectangle.Fill>
</Rectangle>

<Style x:Key="MenuItem" TargetType="{x:Type Controls:MenuItemEx}">
    <Setter Property="Icon" Value="{StaticResource MenuItemIcon}"/>
    <Setter Property="InputGestureText" Value="{Binding InputGestureText}"/>
    <Setter Property="Caliburn:Action.Target" Value="{Binding}"/>
    <Setter Property="Caliburn:Message.Attach" Value="{Binding ActionText}"/>
</Style>

突出问题

我现在遇到的问题是顶级项目也向右移动（下面用红色箭头显示），因为矩形维度被硬编码为16.但是，绑定到Witdh和{{ 1}}似乎导致图像再次消失......

Layout Problem

我现在要尝试模板菜单项并将图标区域设置为自动折叠。欢迎任何其他解决方案...

Answer 1

Viewbox可以通过将内容扩展为可用尺寸来轻松处理此类事情

所以从图像中删除尺寸并将图像放在Viewbox中

例如

<Setter Property="Icon">
    <Setter.Value>
        <Viewbox>
            <Image Source="{Binding IconSource}" />
        </Viewbox>
    </Setter.Value>
</Setter>

如果您想限制可用的尺寸，您可以在Viewbox上应用尺寸

例如

<Viewbox Width="16" Height="16">

来自MSDN: Viewbox

Viewbox定义了一个内容装饰器，可以拉伸和缩放单个子节点以填充可用空间。

Answer 2

如果图标未包含在外部静态容器中，则两个主要问题是共享图标（请参阅编辑问题）。我最终将这一切工作的方式是使用以下XAML：

<Rectangle x:Key="MenuItemIcon" x:Shared="False" 
           Visibility="{Binding IconVisibility}"
           HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
           Width="16" Height="16">
    <Rectangle.Fill>
        <VisualBrush Stretch="Uniform" Visual="{Binding IconSource}"/>
    </Rectangle.Fill>
</Rectangle>

<Style x:Key="MenuItem" TargetType="{x:Type Controls:MenuItemEx}">
    <Setter Property="Icon" Value="{StaticResource MenuItemIcon}"/> 
    <Setter Property="InputGestureText" Value="{Binding InputGestureText}"/>
    <Setter Property="Caliburn:Action.Target" Value="{Binding}"/>
    <Setter Property="Caliburn:Message.Attach" Value="{Binding ActionText}"/>
</Style>

Visibility的默认MainMenuIcon设置为Visibility.Collapsed。这提供了以下菜单外观......

Look

正确地确定大小图标绑定到画布对象

2 个答案: