Simultaneous use of ContentTemplate and Content results in an error

[Frillaut]

Good afternoon!
This code results in an error System.StackOverflowException: "Exception_WasThrown"

<DataTemplate x:Key="Style2">
    <Grid>
        <ContentPresenter/>
        <!-- Other elements -->
    </Grid>
</DataTemplate>
<Style x:Key="Style1" TargetType="{x:Type md:ColorZone}">
    <Setter Property="ContentTemplate" Value="{StaticResource Style2}"/>
    <Setter Property="Content">
        <Setter.Value>
            <md:PackIcon Kind="SortDescending"/>
        </Setter.Value>
    </Setter>
</Style>

Any ideas?

[nicolaihenriksen]

@Frillaut It would seem you're mixing concepts in an unfortunate combination here.

Often times when the Content and ContentTemplate properties are used in combination on a ContentControl (which ColorZone effectively is) that is typically because the value of Content is not a UI element (i.e. does not have a visual representation). In that case, one option is to use the ContentTemplate to provide a visual representation for the value in Content.

In your case, Content is already a UI element and as such you probably only need to use one of the properties. You can either just use the ContentTemplate, and have something like this (not tested!):

<DataTemplate x:Key="Style2">
    <Grid>
        <md:PackIcon Kind="SortDescending"/>
        <!-- Other elements -->
    </Grid>
</DataTemplate>
<Style x:Key="Style1" TargetType="{x:Type md:ColorZone}">
    <Setter Property="ContentTemplate" Value="{StaticResource Style2}"/>
</Style>

Or you can omit the ContentTemplate and just use Content directly (not tested!):

<Style x:Key="Style1" TargetType="{x:Type md:ColorZone}">
    <Setter Property="Content">
        <Setter.Value>
          <Grid>
              <md:PackIcon Kind="SortDescending"/>
              <!-- Other elements -->
          </Grid>
        </Setter.Value>
    </Setter>
</Style>

My gut feeling tells me that it is the <ContentPresenter /> in your DataTemplate that ends up in an endless loop causing the stack overflow.

With that said, the code you provided does seem a little odd to me. It may be easier to provide valuable feedback if you could add a bit more context.

[Frillaut]

I created this style from ComboBox...

<md:ColorZone DataContext="{Binding ComboBoxPanel}" Style="{StaticResource StyleNavigationComboBoxFilter}"/>

<Style x:Key="StyleNavigationComboBoxColorZone" TargetType="{x:Type md:ColorZone}">
    <Setter Property="Mode" Value="PrimaryLight"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="md:ElevationAssist.Elevation" Value="Dp2"/>
    <Setter Property="CornerRadius" Value="2"/>
    <Setter Property="Height" Value="32"/>
    <Setter Property="Margin" Value="16,0,0,0"/>
</Style>

<Style x:Key="StyleNavigationComboBoxIcon" TargetType="{x:Type md:PackIcon}">
    <Setter Property="Height" Value="18"/>
    <Setter Property="Width" Value="18"/>
    <Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkBrush}"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Margin" Value="8,0,0,0"/>
</Style>

<Style x:Key="StyleNavigationComboBoxFilter" TargetType="{x:Type md:ColorZone}" BasedOn="{StaticResource StyleNavigationComboBoxColorZone}">
    <Setter Property="Content">
        <Setter.Value>
            <Grid>
                <md:PackIcon Kind="FilterOutline" Style="{StaticResource StyleNavigationComboBoxIcon}"/>
                <ComboBox Width="128" SelectedIndex="0"
                          Padding="32,2,8,0"
                          md:TextFieldAssist.DecorationVisibility="Collapsed"
                          md:TextFieldAssist.UnderlineBrush="{x:Null}"
                          BorderBrush="{DynamicResource PrimaryHueDarkBrush}"
                          BorderThickness="0,0,0,0"
                          Cursor="Hand"
                          ItemsSource="{Binding DataContext.List, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type md:ColorZone}}}"
                          SelectedItem="{Binding DataContext.SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type md:ColorZone}}}"
                          DisplayMemberPath="Text"
                          md:ElevationAssist.Elevation="Dp2"
                          VerticalAlignment="Stretch"
                          />
            </Grid>
        </Setter.Value>
    </Setter>
</Style>

If I need a new style where only the icon has been changed, I will have to completely duplicate StyleNavigationComboBoxFilter

[Frillaut]

I thought it would come out like this...

<DataTemplate x:Key="ContentTemplateNavigationComboBox">
    <Grid>
        <ContentPresenter/>
        <ComboBox Width="128" SelectedIndex="0"
                  Padding="32,2,8,0"
                  md:TextFieldAssist.DecorationVisibility="Collapsed"
                  md:TextFieldAssist.UnderlineBrush="{x:Null}"
                  BorderBrush="{DynamicResource PrimaryHueDarkBrush}"
                  BorderThickness="0,0,0,0"
                  Cursor="Hand"
                  ItemsSource="{Binding DataContext.List, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type md:ColorZone}}}"
                  SelectedItem="{Binding DataContext.SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type md:ColorZone}}}"
                  DisplayMemberPath="Text"
                  md:ElevationAssist.Elevation="Dp2"
                  VerticalAlignment="Stretch"
                  />
    </Grid>
</DataTemplate>
    
<Style x:Key="StyleNavigationComboBoxFilter" TargetType="{x:Type md:ColorZone}" BasedOn="{StaticResource StyleNavigationComboBoxColorZone}">
    <Setter Property="ContentTemplate" Value="{StaticResource ContentTemplateNavigationComboBox}"/>
    <Setter Property="Content">
        <Setter.Value>
            <md:PackIcon Kind="FilterOutline" Style="{StaticResource StyleNavigationComboBoxIcon}"/>
        </Setter.Value>
    </Setter>
</Style>
    
<Style x:Key="StyleNavigationComboBoxFilter1" TargetType="{x:Type md:ColorZone}" BasedOn="{StaticResource StyleNavigationComboBoxColorZone}">
    <Setter Property="ContentTemplate" Value="{StaticResource ContentTemplateNavigationComboBox}"/>
    <Setter Property="Content">
        <Setter.Value>
            <md:PackIcon Kind="Filter1" Style="{StaticResource StyleNavigationComboBoxIcon}"/>
        </Setter.Value>
    </Setter>
</Style>
    
<Style x:Key="StyleNavigationComboBoxFilter2" TargetType="{x:Type md:ColorZone}" BasedOn="{StaticResource StyleNavigationComboBoxColorZone}">
    <Setter Property="ContentTemplate" Value="{StaticResource ContentTemplateNavigationComboBox}"/>
    <Setter Property="Content">
        <Setter.Value>
            <md:PackIcon Kind="Filter2" Style="{StaticResource StyleNavigationComboBoxIcon}"/>
        </Setter.Value>
    </Setter>
</Style>

[nicolaihenriksen]

@Frillaut I see. For such a scenario, I think I would create an attached property to hold the PackIconKind. You can then set that attached property value directly in the StyleNavigationComboBoxFilter1/StyleNavigationComboBoxFilter2 styles in a manner like this:

<Style x:Key="StyleNavigationComboBoxFilter1" TargetType="{x:Type md:ColorZone}" BasedOn="{StaticResource StyleNavigationComboBoxColorZone}">
    <Setter Property="ContentTemplate" Value="{StaticResource ContentTemplateNavigationComboBox}"/>
    <Setter Property="custom:MyCustomProperties.CustomPackIconKind" Value="Filter2" />
</Style>

And then in your ContentTemplateNavigationComboBox DataTemplate you could use that instead of the ContentPresenter:

<DataTemplate x:Key="ContentTemplateNavigationComboBox">
    <Grid>
        <md:PackIcon Kind="{Binding (custom:MyCustomProperties.CustomPackIconKind)}" />
        <ComboBox Width="128" SelectedIndex="0"
           ....
          />
    </Grid>
</DataTemplate>

You may need to add a RelativeSource to the binding to make it look up the correct source for the binding.

[Frillaut]

Thank you for your help. We will study a new topic)

[nicolaihenriksen]

You're welcome. Please note that the attached property syntax can be deceitful. In some places (e.g. bindings) attached properties must be encapsulated in parentheses, whereas in other places that is not the case (e.g. style setter).

[Frillaut]

Again, thank you for your advice! It all worked out.