CODEWITHSUNDEEP
c#wpfprism
Ramin Bateni
Ramin Bateni

Reputation: 17415

Wpf Prism give style to each items of a ItemControl (Views in a Region)

I have a WPF Prism project and it has a Region base on ItemControl:

<ItemsControl prism:RegionManager.RegionName="WorkspaceRegion" >

In this ItemControl i see some of my Views verticaly well but i want give a style to each Item of ItemControl (each View).

All of items (views) must have same style (for example: background color, padding, margin, border and...)

I want something like this (for example):

enter image description here

I used a simple style and code like this:

<ItemsControl prism:RegionManager.RegionName="WorkspaceRegion"  Background="#765e4d" Margin="10">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border BorderBrush="Red" Padding="10" BorderThickness="1" CornerRadius="5">
                            <ContentPresenter Content="{Binding}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>

</ItemsControl>

Its Error:

A style intended for type 'ItemsControl' cannot be applied to type 'View1'

Also i tested this codes:

<ItemsControl prism:RegionManager.RegionName="WorkspaceRegion"  Background="#765e4d" Margin="10">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid >
                <TextBlock Text="Test"/>
                <Border BorderBrush="Red" Padding="10" Margin="10" BorderThickness="1" CornerRadius="5">
                    <ContentPresenter Content="{Binding}"/>
                </Border>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

But the result is like when i write:

<ItemsControl prism:RegionManager.RegionName="WorkspaceRegion" >

enter image description here

Edit1:

I used <ItemsPresenter/> instead of <ContentPresenter Content="{Binding}"/>

Result: without any change

Edit2:

I write this style for ItemContainerStyle property of the ItemsControl and it works if i remove ControlTemplate part from it.

Now the question is which kind of Presenter or Xaml Tag i should use inside the following ControlTemplate to my Views (UserControls) be shown.

   <Style TargetType="{x:Type UserControl}" x:Key="MyItemContainerStyle">
        <Setter Property="Background" Value="Brown"/>
        <Setter Property="BorderBrush" Value="Blue"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate>
                     ??????????????????????????
                    <!-- The following ContentPresenter not working and the Items dose not show -->
                    <ContentPresenter/> 
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 1

Views: 1309

Answers (2)

Rachel
Rachel

Reputation: 132558

Set the ContentTemplate property of the style, not Control.Template or Template

An ItemsControl gets rendered like this :

<ItemsControl>
    <ItemsPanel>
        <ContentPresenter>
            <ItemTemplate>
        </ContentPresenter>

        <ContentPresenter>
            <ItemTemplate>
        </ContentPresenter>

        <ContentPresenter>
            <ItemTemplate>
        </ContentPresenter>
    </ItemsPanel>
</ItemsControl>

The ItemContainerStyle applies to the ContentPresenter object that wraps each item in this XAML tree, and I don't believe a ContentPresenter has either a Control.Template or a Template property.

When changing how a ContentPresenter is displayed you should overwrite the ContentTemplate property instead.

Upvotes: 1

mDC
mDC

Reputation: 116

This works for me in my test application:

<ItemsControl Background="#FF85664F" prism:RegionManager.RegionName="WorkspaceRegion">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="DarkGray" Padding="10"
                    Margin="5, 5, 5, 0" BorderThickness="1"
                    CornerRadius="5" Background="#FFC3BF8F">
                <ContentPresenter Content="{Binding}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <system:String>ItemsControl Item #1</system:String>
    <system:String>ItemsControl Item #2</system:String>
    <system:String>ItemsControl Item #3</system:String>
    <system:String>ItemsControl Item #4</system:String>
    <system:String>ItemsControl Item #5</system:String>
</ItemsControl>

Upvotes: 0

Related Questions