在Resources中创建一个控件,并在XAML WPF中重用它

Question

我只是尝试创建一个简单的符号/几何/控件,并在同一窗口的几个地方更改和重用它.

示例:中间有圆圈的黑色正方形.

然后圆圈应该在红色和绿色之间变化(类似于单光红绿灯).使用图像可以实现.我尝试将其解决为Window资源,但我不会解释.

想法:我将它写入资源,在这里我尝试使用Canvas:

<Window.Resources>
    <Canvas x:Key="Ampel">
        <Rectangle Fill="Black" HorizontalAlignment="Left" Height="52" Stroke="Black"       VerticalAlignment="Top" Width="50"/>
        <Ellipse x:Name="RedGreen" Fill="Red" HorizontalAlignment="Left" Height="27" Margin="11,12,0,0" Stroke="Black" VerticalAlignment="Top" Width="28" RenderTransformOrigin="0.214,0.256"/>
    </Canvas>
</Window.Resources>

然后我想将它放在网格或面板中,但我如何引用它？

<Canvas x:Name="RedGreen1" Height="50" Width="50" DataContext="{DynamicResource Ampel}" /> 

这不会返回编译器错误,但在窗口中不显示任何内容.它也不适用于WrapPanel或其他任何东西.

如果它可以工作,我怎么能在代码behing中引用它来改变圆的颜色.有点像RedGreen1.RedGreen.Fill=Brushes.Green？

我读了关于红绿灯的文章.是否真的有必要创建一个UserControl,还是有办法用window.resources来解决它？

应用程序的一般概念是有一个参数列表.如果所有参数都标记为绿色,则每个具有正确输入的都标记为绿色并且只能启动计算.

即使我用红色/绿色图像运行它,我也会尝试更好地理解WPF/XAML并学习一些东西.

谢谢.

Answer 1

在定义任意Control in时Resources,可以在将来的Control中使用它,它具有属性Content并从派生派生Control.这些都是如下:ContentControl,Label,ContentPresenter,等.

x:Shared="False"如果要在许多控件中使用此资源,还必须设置资源,因为x:Shared="True"默认情况下,一个资源对所有资源都是通用的 - 在这种情况下,系统会对重复的内容发誓.何时x:Shared="False"为每个元素创建何时为其请求创建资源.引用自MSDN:

设置为false时,修改WPF资源检索行为,以便对属性资源的请求为每个请求创建新实例,而不是为所有请求共享同一实例.

例:

<Window.Resources>
    <Canvas x:Key="Ampel" x:Shared="False">
        <Rectangle Fill="Black" HorizontalAlignment="Left" Height="52" Stroke="Black" VerticalAlignment="Top" Width="50"/>
        <Ellipse x:Name="RedGreen" Fill="Red" HorizontalAlignment="Left" Height="27" Margin="11,12,0,0" Stroke="Black" VerticalAlignment="Top" Width="28" />
    </Canvas>
</Window.Resources>

<Grid>
    <ContentControl Name="MyContentControl" Content="{StaticResource Ampel}" HorizontalAlignment="Left" />        
    <Label Name="MyLabel" Content="{StaticResource Ampel}" HorizontalAlignment="Center" />
    <ContentPresenter Name="MyContentPresenter" Content="{StaticResource Ampel}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

要Fill在代码隐藏中更改Ellipse,您可以这样:

private void ChangeBackground_Click(object sender, RoutedEventArgs e)
{
    var canvas = MyContentControl.Content as Canvas;

    if (canvas != null)
    {
        foreach (var item in canvas.Children)
        {
            if (item is Ellipse)
            {
                ((Ellipse)item).Fill = Brushes.Green;
            }
        }
    }
}

Answer 2

canvas 没有模板属性，这就是我们在这里使用 contencontrol 的原因。

<Window.Resources>
    <ControlTemplate x:Key="Ampel" TargetType="ContentControl">
        <Canvas>
            <Rectangle Fill="Black" HorizontalAlignment="Left" Height="52" Stroke="Black" VerticalAlignment="Top" Width="50"/>
            <Ellipse x:Name="RedGreen" Fill="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left" Height="27" Margin="11,12,0,0" Stroke="Black" VerticalAlignment="Top" Width="28" RenderTransformOrigin="0.214,0.256"/>
        </Canvas>
    </ControlTemplate>
</Window.Resources >

<ContentControl  Template="{StaticResource Ampel}" Tag="Red" ></ContentControl>
<ContentControl  Template="{StaticResource Ampel}" Tag="Green" ></ContentControl>
<ContentControl  Template="{StaticResource Ampel}" Tag="Blue" ></ContentControl>

输出