How to add a button outside datatemplate in itemscontrol

Question

I have created a WPF app.In that I have a Datatemplate as follows

 <DataTemplate x:Key="ItemTemplate">
    <StackPanel>
        <TextBlock Text="item"/>
        <TextBlock Text="{Binding Number}"/>
    </StackPanel>
 </DataTemplate>

I have an ItemsControl like this

 <ItemsControl ItemsSource="{Binding Items}"
                      Grid.Column="1"
                      Grid.Row="3"
                      ItemTemplate="{StaticResource ItemTemplateWithButton}" />

where I need a itemtemplate like this

    <DataTemplate x:Key="ItemTemplateWithButton">
        <StackPanel>
            <StackPanel>
                <TextBlock Text="item"/>
                <TextBlock Text="{Binding Number}"/>
            </StackPanel>
            <StackPanel>
                <Button>
                    <StackPanel>
                        <TextBlock Text="item"/>
                        <TextBlock Text="{Binding Number}"/>
                    </StackPanel>
                </Button>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

Is there any possibility of reusing the datatemplate in the new itemscontrol?

As far as I am aware, you can't reuse the template, you'll have to paste your code in. — Mike Eason, Aug 05 '15 at 09:30

score 2 · Accepted Answer · answered Aug 05 '15 at 09:49

2

You can use ContentControl too

<DataTemplate x:Key="ItemTemplate">
    <StackPanel>
        <TextBlock Text="item"/>
        <TextBlock Text="{Binding Number}"/>
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="ItemTemplateWithButton">
    <StackPanel>
        <ContentControl ContentTemplate="{StaticResource ItemTemplate}" />
        <Button>
            <ContentControl ContentTemplate="{StaticResource ItemTemplate}" />
        </Button>
    </StackPanel>
</DataTemplate>

answered Aug 05 '15 at 09:49

Nacho

962
6
14

1

@Bahman_Aries. That's weird. It should work. Have you tried to bind content property? `Content="{Binding}"` – Liero Aug 05 '15 at 10:16
@Liero: My mistake, you are right, adding `Content="{Binding}"` in both `ContentControls` is the key for this solution to work. – Bahman_Aries Aug 05 '15 at 11:02

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

What I understand by reading this answer and what Liero mentioned in the comments is it's possible to reuse a DataTemplate by using either ContentPresenter or ContentControl. However:

ContentPresenter is more lightweight.
ContentPresenter is designed to be used inside control templates.
ContnetPresenter is designed to be used as-is while ContentControl is designed to be extended (inherited from).

As a result, here is a solution based on what you asked:

    <DataTemplate x:Key="ItemTemplate">
        <StackPanel>
            <TextBlock Text="item"/>
            <TextBlock Text="{Binding Number}"/>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="ItemTemplateWithButton">
        <StackPanel>
            <ContentPresenter ContentTemplate="{StaticResource ItemTemplate}"/>
            <StackPanel>
                <Button Content="{Binding}" ContentTemplate="{StaticResource ItemTemplate}" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>

edited May 23 '17 at 12:21

Community

1
1

answered Aug 05 '15 at 09:44

Bahman_Aries

4,658
6
36
60

1

What about: ``? The second StackPanel and second ContentPresenter are redundant – Liero Aug 05 '15 at 10:17
@Liero: `Content` is the `ContentPresenter` of the `Button`. So your code is basically is the same as mine, and it will work fine. ps, they are not redundant, this structure is what OP asked for. – Bahman_Aries Aug 05 '15 at 10:20
The result is the same, but now you have ContentPresenter inside ContentPresenter, since Button contains ContentPresenter in it's template. It's like adding ContentPresenter to ContentControl, because Button is ContentControl acutally. – Liero Aug 05 '15 at 10:29
1

@Liero, You are right about the `Button`, it's redundant. I'll modify my answer based on your comment. The second `StackPanel` is also unnecessary. But since OP used one, I'll leave it there. – Bahman_Aries Aug 05 '15 at 10:35
I also should correct my previous comment: `Content` in `` is actually the `ContentControl` of the `Button`. – Bahman_Aries Aug 05 '15 at 10:39

Glen Thomas · Answer 3 · 2015-08-05T13:41:31.830

You could create a UserControl to hold the xaml you want to reuse:

<UserControl x:Class="StackOverflow.SharedControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <StackPanel>
            <TextBlock Text="item">
            </TextBlock>
            <TextBlock Text="{Binding Number}"></TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

Then use this UserControl in both templates.

<DataTemplate x:Key="ItemTemplate">
    <controls:SharedControl/>
</DataTemplate>

<DataTemplate x:Key="ItemTemplateWithButton">
    <StackPanel>
        <controls:SharedControl/>
        <StackPanel>
            <Button>
                <StackPanel>
                    <TextBlock Text="item">
                    </TextBlock>
                    <TextBlock Text="{Binding Number}"></TextBlock>
                </StackPanel>
            </Button>
        </StackPanel>
    </StackPanel>
</DataTemplate>

Why to create usercontrol when you can instantiate the datatemplate inside ContentPresenter? — Liero, Aug 05 '15 at 10:19
I think it is a bit too strong to say "you **need** to create a UserControl". — Rhys, Aug 05 '15 at 13:40

How to add a button outside datatemplate in itemscontrol

3 Answers3