在代码中使用在xaml中声明的自定义`Style`会引发运行时错误

Question

I declare a style in xaml that I need to use and apply to a user control in code behind and when I use the same style twice the following error throws:

Element already has a logical parent. It must be detached from the old parent before it is attached to a new one.

What am I doing wrong? I need to create multiple controls of the same user-control-type in code behind and apply one and the same Style to it.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
    x:Class="MyChartControl.MainWindow"
    Title="MainWindow" Height="655" Width="1020">

<Window.Resources>

   <Style x:Key="SciChartSurfaceStyle" TargetType="{x:Type s:SciChartSurface}">

        <Setter Property="XAxis">
            <Setter.Value>
                <s:DateTimeAxis Visibility="Visible"
                                TextFormatting="dd/MM/yyyy"
                                SubDayTextFormatting="dd/MM/yyyy HH:mm:ss.fff"
                                GrowBy="0.02, 0.02"/>      
            </Setter.Value>
        </Setter>

        <Setter Property="YAxis">
            <Setter.Value>
                <s:NumericAxis  AxisAlignment="Right"
                                Visibility="Visible" 
                                TextFormatting="{Binding YAxisFormatting}" 
                                GrowBy="0.02, 0.02" 
                                AutoRange="Always"/>
            </Setter.Value>
        </Setter>

        <Setter Property="ChartModifier">
            <Setter.Value>
                <s:ModifierGroup>

                    <s:RubberBandXyZoomModifier IsAnimated = "False" IsXAxisOnly = "True" ExecuteOn = "MouseRightButton"/>
                    <s:ZoomPanModifier XyDirection="XYDirection" ClipModeX = "ClipAtExtents" ExecuteOn ="MouseLeftButton" />
                    <s:MouseWheelZoomModifier XyDirection = "XYDirection"/>
                    <s:ZoomExtentsModifier IsAnimated = "False" ExecuteOn = "MouseDoubleClick" />
                    <s:XAxisDragModifier  DragMode = "Scale"/>
                    <s:CursorModifier SourceMode="AllSeries"  UseInterpolation="True"/>
                    <s:LegendModifier ShowLegend="True" LegendPlacement ="Inside" GetLegendDataFor="AllSeries" Margin="10"/>

                     <!--<s:SeriesSelectionModifier ReceiveHandledEvents="True">
                            <s:SeriesSelectionModifier.SelectedSeriesStyle>
                                <Style TargetType="s:BaseRenderableSeries">
                                    <Setter Property="SeriesColor" Value="White"/>
                                    <Setter Property="PointMarkerTemplate">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <s:EllipsePointMarker Fill="#FF00DC" Stroke="White" Width="7" Height="7"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </s:SeriesSelectionModifier.SelectedSeriesStyle>
                        </s:SeriesSelectionModifier>-->


                </s:ModifierGroup>
            </Setter.Value>
        </Setter>

    </Style>

</Window.Resources>

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="32" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Orientation="Horizontal" Background="Black">
        <TextBlock Text="Dataseries Type:" Margin="5,0" VerticalAlignment="Center" FontSize="12" Foreground="White"/>
        <ComboBox x:Name="ComboBox_ChooseSeriesType" MinWidth="140" Margin="5,3" VerticalContentAlignment="Center"/>
        <TextBlock Text="Theme:" Margin="5,0" VerticalAlignment="Center" FontSize="12" Foreground="White"/>
        <ComboBox x:Name="ComboBox_ChooseTheme" MinWidth="140" Margin="5,3" VerticalContentAlignment="Center"/>
    </StackPanel>


        <dxdo:LayoutGroup Grid.Row="1" x:Name="LayoutGroup" Orientation="Vertical">

            <!--<dxdo:LayoutPanel Name="Panel1">
                <s:SciChartSurface Name="Surface1" Style="{StaticResource SciChartSurfaceStyle}"></s:SciChartSurface>
            </dxdo:LayoutPanel>-->




    </dxdo:LayoutGroup>



    </Grid>

And the code-behind method that retrieves the style and applies it:

private void TestSomeStuff()
    {
        var style = this.TryFindResource("SciChartSurfaceStyle") as Style;
        var sciChartSurface1 = new SciChartSurface() {Style = style};
        var panel1 = new LayoutPanel(){Content=sciChartSurface1};

        var style2 = this.TryFindResource("SciChartSurfaceStyle") as Style;
        var sciChartSurface2 = new SciChartSurface() {Style = style2};
        var panel2 = new LayoutPanel() {Content = sciChartSurface2};
        LayoutGroup.Add(panel1);
        LayoutGroup.Add(panel2);
    }

EDIT

Adding panel1 to LayoutGroup works just fine but the run-time error occurs as soon as I attempt to add panel2 . Also, as long as do not inject style into a new instance of SciChartSurface it works just fine. The error pops up as soon as I inject the style into both new surfaces.

Answer 1

Do not set Style in code behind directly:

var style = this.TryFindResource("SciChartSurfaceStyle") as Style;
var sciChartSurface1 = new SciChartSurface() {Style = style};

but with SetValue method:

var style = this.TryFindResource("SciChartSurfaceStyle") as Style;
var sciChartSurface1 = new SciChartSurface();
sciChartSurface1.SetValue(StyleProperty, style);