正确大小图标绑定到画布对象 [英] Correctly Size Icon Bound to Canvas Object

问题描述

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

I have to following method that retrieves Canvas object from a Resource Dictionary using the named assembly and a relative URI and binds the Canvas to a MenuItems Icon. This code to get the vector graphic Canvas is

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>

你可以看到我在尝试设置 / code>到16 x 16，并通过还原填充一个大小的矩形，但这是失败 - 它只是导致一个空白的图像。如果我省略了 Height 和 Width 规范，结果图形太大。

You can see I am both attempting to set the height on the Canvas to 16 x 16 directly and also by reverting to fill a sized rectangle, but this is failing - it just results in a blank image. If I leave out the Height and Width specifications the resulting graphic is too large.

当我通过

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

但这会导致图像消失。

But this causes the image to disappear.

如何正确调整 Canvas 对象以适应我的 MenuItem ？

How can I correctly re-size my Canvas object to fit my MenuItem?

编辑（部分回答）：

我来了许多帖子，但没有一个解决了我在一个帖子中的所有问题。问题：

I have come accross many many posts, but none that solved all the issues I was having in one post. The problems:

1. 没有使用矢量图形显示任何图像。 [已解决]


2. 显示图片但未正确缩放。 [已解决]


3. 缩放并显示图片，但一次只能显示一张图片。 [已解决]


4. 图像缩放并显示所有必需的MenuItem，但是知道顶级菜单项具有不必要的边距。 [ON GOING]

1. Not getting any images displayed using vector graphics. [SOLVED]
2. Getting images displayed but not correctly scaled. [SOLVED]
3. Getting images scaled and displayed but only one at a time. [SOLVED]
4. Imaged are scaled and displayed for all required MenuItems but know the top level menu items have an unwanted margin. [ON GOING]

我如何解决所有问题，但最后一个问题是1.使用正确的图片来源的矢量图形，在这种情况下我发现填充一个矩形做了工作。 2.您可以直接绑定到Icon对象以获取图像，但没有适当缩放的实际方法。 3.您可以使用矩形缩放图像，设置宽度和高度，并填充 VisualBrush ，但是这会破坏 MenuItems 中的资源，所以只有一个会显示。要使图标不共享，您必须创建一个静态资源并设置 x：Shared =False。最终的XAML类似

How I solved all but the last issue was 1. use the correct image source for vector graphics, in this case i found that filling a rectangle did the job. 2. You can bind to the Icon object directly to get the images, but there is no real way of scaling these appropriately. 3. You can scale the images by using a rectangle, setting Width and Height and filling this with a VisualBrush, but this shars the resource among MenuItems so only one will ever show up. To get the Icons to be non-shared you have to create a static resource and set x:Shared="False". The final XAML looks like

<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 和 Height 似乎会导致图片再次消失...

I now have the issue where the top level items are also shifted to the right (shown with red-arrow below) because the rectangle dimensions are hard coded to 16. However, binding to the Witdh and Height seems to cause the image to disappear again...

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

I am now going to attempt to template the menu item and set the Icon area to auto-collapse. Any other solutions are welcome...

推荐答案

两个主要问题是图标是共享的，如果它们不包含在外部静态容器（请参阅对问题的编辑）。我得到这一切的工作到底是使用以下XAML：

Two main issues were that Icons are shared if they are not contained in an external static container (see edits to question). The way I got this all to work in the end is to use the following 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 c $ c> MainMenuIcon 设置为 Visibility.Collapsed 。这提供了以下菜单外观...

Where the default Visibility of the MainMenuIcon is set to Visibility.Collapsed. This provides the following menu look...

这篇关于正确大小图标绑定到画布对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！