为啥克隆的 UIElement 或 FrameworkElement 会丢失样式

Posted 2023-04-01

【中文标题】为啥克隆的 UIElement 或 FrameworkElement 会丢失样式

【英文标题】：Why is Style lost for cloned UIElement or FrameworkElement为什么克隆的 UIElement 或 FrameworkElement 会丢失样式

【发布时间】：2019-11-29 11:11:59

【问题描述】：

我正在尝试加载具有UIElements 和/或具有Style 和DataTriggers 的FrameworkElements 的Grid。

以下是按预期工作的简单本机 XAML；通过 3 种状态切换复选框为 Rectangle 提供三种不同的样式（见底部图片）。

<Grid
    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:local="clr-namespace:XamlVsLoad"
    mc:Ignorable="d"
    Height="450" Width="800">
    <CheckBox Name="MyCheck" IsChecked="True" Content="Checkbox" IsThreeState="True" Margin="10,10,0,0" Width="200"/>
    <Rectangle Height="100" Width="100" StrokeThickness="5" Margin="10,50,100,100">
        <Rectangle.Style>
            <Style TargetType="Rectangle">
                <Setter Property="Fill" Value="White"/>
                <Setter Property="Stroke" Value="Black"/>
                <Style.Triggers>
                    <DataTrigger Binding="Binding ElementName=MyCheck, Path=IsChecked" Value="True" >
                        <Setter Property="Fill" Value="Orange"/>
                        <Setter Property="Stroke" Value="Blue"/>
                    </DataTrigger>
                    <DataTrigger Binding="Binding ElementName=MyCheck, Path=IsChecked" Value="False" >
                        <Setter Property="Fill" Value="Blue"/>
                        <Setter Property="Stroke" Value="Orange"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</Grid>

当我将相同的文本保存到文件并使用 XAML 将其动态加载到 Window 的 Viewboxs 时，它也可以使用，如下所示：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0">
    <DockPanel>
        <Label Content="Native" DockPanel.Dock="Top" HorizontalAlignment="Center"  Margin="10,10,10,10" />
        <Viewbox Name="NativeViewbox" Height="auto" Width="200" DockPanel.Dock="Top"/>
           <!-- Native Grid Omitted for brevity 3 uniquely named checkboxes -->
        </Viewbox>
</DockPanel>
<DockPanel Grid.Column="1">
    <DockPanel>
        <Label Content="Dynamic" DockPanel.Dock="Top"  HorizontalAlignment="Center"  Margin="10,10,10,10" />
        <Viewbox Name="DynamicViewbox" Height="auto" Width="200" DockPanel.Dock="Top"/>
    </DockPanel>
</DockPanel>
<DockPanel Grid.Column="2">
    <DockPanel>
        <Label Content="Clone" DockPanel.Dock="Top" HorizontalAlignment="Center"  Margin="10,10,10,10" />
        <Viewbox Name="CloneViewbox" Height="auto" Width="200" DockPanel.Dock="Top" />
    </DockPanel>
</DockPanel>
<DockPanel Grid.Column="3">
    <DockPanel>
        <Label Content="Saved" DockPanel.Dock="Top" HorizontalAlignment="Center"  Margin="10,10,10,10" />
        <Viewbox Name="SavedViewbox" Height="auto" Width="200" DockPanel.Dock="Top"/>
    </DockPanel>
</DockPanel>

但是，如果我尝试将 FrameworkElements/UIElements 从一个 Grid/container 复制/克隆/深度复制（我尝试了几种不同的方法）到一个新的，则该样式不再有效。以下是我目前加载和克隆它们的各种方式：

public partial class ReadCopy : Window 
    public ReadCopy() 
        InitializeComponent();
        // test the dynamic load
        Grid NativeXaml = ReadGrid("C:\\XamlFiles\\LoadXaml.xaml");
        DynamicViewbox.Child = NativeXaml; // honors style

        // test the Clone load
        Grid CloneXaml = new Grid();
        foreach (FrameworkElement fe in NativeXaml.Children) CloneXaml.Children.Add(Clone(fe));
        CloneViewbox.Child = CloneXaml;    // doesn't honor style

        // test the save Clone and then load
        StringBuilder outstr = new StringBuilder();
        XmlWriterSettings settings = new XmlWriterSettings  Indent = true, OmitXmlDeclaration = true, IndentChars = "  ", NewLineChars = "\r\n", NewLineHandling = NewLineHandling.Replace ;
        XamlDesignerSerializationManager dsm = new XamlDesignerSerializationManager(XmlWriter.Create(outstr, settings))  XamlWriterMode = XamlWriterMode.Expression ;
        XamlWriter.Save(CloneXaml, dsm);
        File.WriteAllText("C:\\XamlFiles\\SavedXaml.xaml", outstr.ToString());

        Grid SavedXaml = ReadGrid("C:\\XamlFiles\\SavedXaml.xaml");
        SavedViewbox.Child = SavedXaml;    // honors style and triggers again...
    

    public Grid ReadGrid(string fn) 
        FileStream fs = new FileStream(fn, FileMode.Open);
        return XamlReader.Load(fs) as Grid;
    

    public FrameworkElement Clone(FrameworkElement it) 
        FrameworkElement clone;
        using (var stream = new MemoryStream())  
            XamlWriter.Save(it, stream);
            stream.Seek(0, SeekOrigin.Begin);
            clone = (FrameworkElement)XamlReader.Load(stream);
        
        clone.Style = it.Style; // setting it or not has no effect
        return clone;
    

开始的简单示例网格通过 XamlWriter.Save 克隆的 XAML 的输出：

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <CheckBox IsChecked="True" IsThreeState="True" Style="x:Null" Name="MyCheck" Width="200" Margin="10,10,0,0">Checkbox</CheckBox>
  <Rectangle StrokeThickness="5" Width="100" Height="100" Margin="10,50,100,100">
    <Rectangle.Style>
      <Style TargetType="Rectangle">
        <Style.Triggers>
          <DataTrigger Binding="Binding Path=IsChecked, ElementName=MyCheck" Value="True">
            <Setter Property="Shape.Fill">
              <Setter.Value>
                <SolidColorBrush>#FFFFA500</SolidColorBrush>
              </Setter.Value>
            </Setter>
            <Setter Property="Shape.Stroke">
              <Setter.Value>
                <SolidColorBrush>#FF0000FF</SolidColorBrush>
              </Setter.Value>
            </Setter>
          </DataTrigger>
          <DataTrigger Binding="Binding Path=IsChecked, ElementName=MyCheck" Value="False">
            <Setter Property="Shape.Fill">
              <Setter.Value>
                <SolidColorBrush>#FF0000FF</SolidColorBrush>
              </Setter.Value>
            </Setter>
            <Setter Property="Shape.Stroke">
              <Setter.Value>
                <SolidColorBrush>#FFFFA500</SolidColorBrush>
              </Setter.Value>
            </Setter>
          </DataTrigger>
        </Style.Triggers>
        <Style.Resources>
          <ResourceDictionary />
        </Style.Resources>
        <Setter Property="Shape.Fill">
          <Setter.Value>
            <SolidColorBrush>#FFFFFFFF</SolidColorBrush>
          </Setter.Value>
        </Setter>
        <Setter Property="Shape.Stroke">
          <Setter.Value>
            <SolidColorBrush>#FF000000</SolidColorBrush>
          </Setter.Value>
        </Setter>
      </Style>
    </Rectangle.Style>
  </Rectangle>
</Grid>

虽然我可以看到它重新格式化了 Style，但我不明白为什么当我使用克隆设置 Viewbox.Child 时它不再起作用。更令人困惑的是，加载克隆的保存文件然后工作。以下是所有四个（本机、动态、克隆、已保存克隆重新加载）的样子：

谁能解释如何通过复制/克隆正确保留样式？

【问题讨论】：

提示：查看 XamlWriter.Save 的输出（将其写入临时文件或其他内容）

我授予了赏金，但并没有真正的答案。如果其他人有更明确的答案，我会尝试再次奖励他们。

【参考方案1】：

Rectangle 上的Style 由CheckBox 触发。因此，Clone() 将无法单独加载子元素。要同时加载它们，请克隆它们的父级 Grid 本身。我重现了您的问题，这对我有用：

  Grid NativeXaml = ReadGrid();
  DynamicViewbox.Child = NativeXaml;

  Grid CloneXaml = (Grid)Clone(NativeXaml);
  CloneViewbox.Child = CloneXaml;

【讨论】：

有趣的观察。但是，我需要能够将项目从一个容器（网格、画布......）克隆/复制到另一个容器。这个答案没有解释为什么一旦项目被单独复制、保存和重新加载，然后工作。

我看到很多关于XAMLReader.Load() 有时会破坏绑定的讨论，但没有明确的文档。如果您正在尝试构建一个可重用的库，其中两个项目像这样绑定在一起，您可以尝试将它们组合成 UserControl 并将 UserControl 父级克隆到您的最终容器中..

@codebender 你并没有真正保存和重新加载 individual 项目。如果您看到您的代码 XamlWriter.Save(CloneXaml, dsm);，您实际上是在保存整个 Grid 而不是单个项目。

@sthotakura 每个项目都单独克隆到新网格上，然后保存。不知何故，风格就在那里，但在完全重新加载之前没有得到尊重/认可。将我的样式附加到我的网格/容器上的另一个元素的每个项目放入另一个容器中并不是一个真正的选择。