Search code examples
wpfitemscontrolitemspaneltemplate

How to use different ItemsControl.ItemContainerStyle for different ItemsPanelTemplate


I have an ItemsControl which uses different ItemsPanelTemplate based on certain condition. I want to have different ItemContainerStyle for each ItemsPanelTemplate (in fact, I want ItemsContainerStyle for only one of the templates). How can I achieve that? Here is the code I am using:

<UserControl.Resources>
    <ItemsPanelTemplate x:Key="UGridItemsPanelTemplate">
      <UniformGrid Name="MyUGrid" Columns="{Binding Columns}" Rows="{Binding Rows}"/>
    </ItemsPanelTemplate>

    <ItemsPanelTemplate x:Key="GridItemsPanelTemplate">
      <Grid Name="MyGrid" Loaded="MyGrid_Loaded"/>
    </ItemsPanelTemplate>
  </UserControl.Resources>

  <Grid>
    <!--ItemList has 1000+ items if IsMap is FALSE; using ItemsConatinerStyle in this case slows the UI down-->
    <ItemsControl  Name="MyPresenter" ItemsSource="{Binding ItemList}" Tag="{Binding IsMap}">
      <ItemsControl.Style>
        <Style TargetType="{x:Type ItemsControl}">
          <Setter Property="ItemsPanel" Value="{StaticResource UGridItemsPanelTemplate}"/>
          <Style.Triggers>
            <Trigger Property="Tag" Value="TRUE">
              <!--I want to use ItemContainerStyle only for this template-->
              <Setter Property="ItemsPanel" Value="{StaticResource GridItemsPanelTemplate}"/>
            </Trigger>
          </Style.Triggers>
        </Style>
      </ItemsControl.Style>

      <!--Use this style only if IsMap is TRUE-->
      <ItemsControl.ItemContainerStyle>
        <Style>
          <Setter Property="Control.Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type ContentControl}">
                <ContentPresenter/>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
          <Setter Property="Grid.Row" Value="{Binding GridRow}"/>
          <Setter Property="Grid.Column" Value="{Binding GridColumn}"/>
        </Style>
      </ItemsControl.ItemContainerStyle>

      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Border x:Name="Border1" Background="{Binding BorderVisible}"
                  BorderThickness="1" Padding="{Binding PaddingVal}">
            <Button Name="ItemButton" Content="{Binding Label}" IsEnabled="{Binding IsButtonEnabled}" CommandParameter="{Binding}"/>
          </Border>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </Grid>
</UserControl>

Thanks, RDV


Solution

  • I found a way, When IsMap is TRUE, set ItemsContainerStyle along with ItemsPanel. Updated code is posted below:

      <UserControl.Resources>
        <ItemsPanelTemplate x:Key="UGridItemsPanelTemplate">
          <UniformGrid Name="MyUGrid" Columns="{Binding Columns}" Rows="{Binding Rows}"/>
        </ItemsPanelTemplate>
    
        <ItemsPanelTemplate x:Key="GridItemsPanelTemplate">
          <Grid Name="MyGrid" Loaded="MyGrid_Loaded"/>
        </ItemsPanelTemplate>
    
        <Style x:Key="ClusterGridContainerStyle">
          <Setter Property="Control.Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type ContentControl}">
                <ContentPresenter/>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
          <Setter Property="Grid.Row" Value="{Binding UnitGridRow}"/>
          <Setter Property="Grid.Column" Value="{Binding UnitGridColumn}"/>
        </Style>
    
      </UserControl.Resources>
    
      <Grid>
        <!--ItemList has 1000+ items if IsMap is FALSE-->
        <ItemsControl  Name="MyPresenter" ItemsSource="{Binding ItemList}" Tag="{Binding IsMap}">
          <ItemsControl.Style>
            <Style TargetType="{x:Type ItemsControl}">
              <Setter Property="ItemsPanel" Value="{StaticResource UGridItemsPanelTemplate}"/>
              <Style.Triggers>
                <Trigger Property="Tag" Value="TRUE">
                  <!--I want to use ItemContainerStyle only for this template-->
                  <Setter Property="ItemsPanel" Value="{StaticResource GridItemsPanelTemplate}"/>
                  <Setter Property="ItemContainerStyle" Value="{StaticResource ClusterGridContainerStyle}"/>
                </Trigger>
              </Style.Triggers>
            </Style>
          </ItemsControl.Style>
    
          <ItemsControl.ItemTemplate>
            <DataTemplate>
              <Border x:Name="Border1" Background="{Binding BorderVisible}"
                      BorderThickness="1" Padding="{Binding PaddingVal}">
                <Button Name="ItemButton" Content="{Binding Label}" IsEnabled="{Binding IsButtonEnabled}" CommandParameter="{Binding}"/>
              </Border>
            </DataTemplate>
          </ItemsControl.ItemTemplate>
        </ItemsControl>
      </Grid>
    </UserControl>