只有最后一个用户控件显示内容控件。

Question

我有一个奇怪的问题。我创建了一个带有标签和画布的用户控件。 该画布引用了一个资源。

但是在我的堆栈面板中，画布只显示在最后一个控件上。

这是我的窗口：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:UserControlSolution" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="UserControlSolution.MainWindow"
    Title="MainWindow" Height="836" Width="270.5" Background="#FF2B2B2B" BorderBrush="{DynamicResource Border}" Loaded="Window_Loaded" >

<Window.Resources>

    <LinearGradientBrush x:Key="Border" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
        <GradientStop Color="#FF6C6C6C" Offset="0.009"/>
        <GradientStop Color="#FFA1A1A1" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="Orange" Color="#FFF5610E"/>
    <SolidColorBrush x:Key="Red" Color="#FFE51400"/>
    <SolidColorBrush x:Key="Blue" Color="#FF1BA1E2"/>
    <SolidColorBrush x:Key="Yellow" Color="#FFFFC40D"/>

</Window.Resources>

<StackPanel Margin="0,10,0,0">
    <local:UserControlButton x:Name="Robby" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Erwin" Height="50" VerticalAlignment="Top" Margin="2,0,0,5" />
    <local:UserControlButton x:Name="Laurens" Height="50" VerticalAlignment="Top"  Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Kevin" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Liesbeth" Height="50" VerticalAlignment="Top" Margin="2,0,0,5" Background="{DynamicResource Orange}"/>
    <local:UserControlButton x:Name="Jack" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Filip" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Stefaan" Height="50" VerticalAlignment="Top" Margin="2,0,0,5" Background="{DynamicResource Red}"/>
    <local:UserControlButton x:Name="Sami" Height="50"  VerticalAlignment="Top" Margin="2,0,0,5" Background="{DynamicResource Blue}"/>
    <local:UserControlButton x:Name="Jurgen" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
</StackPanel>

这是我的用户控件，在底部的内容控件中引用了我的画布。

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50" Background="#FF2F2F2F">

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseEnter">
        <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Expand"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave">
        <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Collapse"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="Expand">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="LayoutRoot">
                        <EasingDoubleKeyFrame KeyTime="0" Value="80"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
                        <EasingDoubleKeyFrame KeyTime="0" Value="79"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Collapse"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5" Width="230" Height="50"/>
    <TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Height="34" Width="149" Text="Onthaal Telefoon" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,10,0,0" FontFamily="Segoe UI Semibold"/>
    <Viewbox HorizontalAlignment="Right" VerticalAlignment="Top" Height="50" Width="58.789">
        <ContentControl Content="{DynamicResource appbar_close}" Width="91.96" Height="79.911" />
    </Viewbox>
</Grid>
</UserControl>

这是我的应用程序文件，我在其中定义了我的资源。

<Application x:Class="UserControlSolution.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         StartupUri="MainWindow.xaml">
<Application.Resources>
    <Canvas x:Key="appbar_close" x:Name="appbar_close" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="#FFEE1111" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " Stroke="#FF2F2F2F"/>
    </Canvas>

    <Canvas x:Key="appbar_check" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF00A300" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z " Stroke="#FF2F2F2F"/>
    </Canvas>

    <Canvas x:Key="appbar_arrow_right" x:Name="appbar_arrow_right" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Width="39.25" Height="28" Canvas.Left="19.0002" Canvas.Top="24" Stretch="Fill" Fill="#FF2B5797" Data="F1 M 19.0002,34L 19.0002,42L 43.7502,42L 33.7502,52L 44.2502,52L 58.2502,38L 44.2502,24L 33.7502,24L 43.7502,34L 19.0002,34 Z " Stroke="#FF2F2F2F"/>
    </Canvas>


    <SolidColorBrush x:Key="UserControlBackground" Color="#FF2F2F2F"/>

</Application.Resources>

从屏幕截图中可以看到，只有最后一个控件显示了画布..

- Robby Smet

---

如果画布是一种资源，那么这是否意味着只有一个画布？你能把“路径”作为资源吗？ - weston

但是我想在我创建的每个用户控件中显示画布。 - Robby Smet

我明白，但是一个 Canvas 怎么可能同时存在于两个地方呢？ - weston

尝试将<ContentControl Content="{DynamicResource appbar_close}"替换为资源的复制粘贴？那么这样行得通吗？ - weston

好的，现在只需提取资源的路径。我不认为你可以按照你目前的方式共享Canvas。但是我相信你可以很好地共享路径。- 我错了 - 你可以在下面的答案中共享 - 很好 - weston

Answer 1

由于您只有一个Canvas，每个Visual在可视树中只能有一个父级，因此每次放置资源时，它都会被放置在可视树的那个位置并从先前的位置移除。您可以直接将Canvas放入UserControl中的ViewBox中，并使Path成为资源，或者尝试在Canvas上设置x:Shared属性为false，这应该会在每次引用它时创建新的资源实例：

<Application.Resources>
    <Canvas x:Key="appbar_close" x:Shared="False" ...>
        <!-- -->
    </Canvas>
</Application.Resources>

- dkozl

Answer 2

将资源上的x:Shared=false设置为真。这样就可以正常工作了。

<Canvas x:Key="appbar_close" x:Name="appbar_close" x:Shared="false" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0" >

- Nitin