wpfmaterial-designcontentcontrol

WPF - ContentPresenter won't display Content

I am trying to create a container-like component. It uses the MaterialDesign Card as a container, places a title in it and allows space for Content.

<ContentControl
    x:Class="Client.Components.AisCard"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="450"
    d:DesignWidth="800">


    <materialDesign:Card
        Margin="0,0,20,0"
        Padding="20,20,20,30">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock
                Grid.Row="0"
                Text="Opmerkingen"
                Style="{StaticResource MaterialDesignHeadline5TextBlock}"
                FontWeight="Medium"
                Margin="0,0,0,10" />

            <ContentPresenter Grid.Row="1" />
        </Grid>
    </materialDesign:Card>

</ContentControl>

Then, I call the Component in a view and attempt to fill its Content:

<Components:AisCard
    Grid.Column="0"
    Grid.Row="0">
    <TextBlock Text="Hello World" />
</Components:AisCard>

The result looks like this:

enter image description here

I expected it to look like this:

enter image description here

Maybe I have misunderstood the way that a ContentPresenter works. Maybe using a Component inside of a Component is not the way to go. Could anyone offer some form of assistance in the matter?

Solution

  • The TextBlock replaces the Card, because both just set the Content property. You would have to declare the Card as part of a ControlTemplate:

    <ContentControl
    x:Class="Client.Components.AisCard"
    ...>
    <ContentControl.Template>
        <ControlTemplate TargetType="ContentControl">
            <materialDesign:Card
                Margin="0,0,20,0"
                Padding="20,20,20,30">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock
                        Grid.Row="0"
                        Text="Opmerkingen"
                        Style="{StaticResource MaterialDesignHeadline5TextBlock}"
                        FontWeight="Medium"
                        Margin="0,0,0,10" />

                    <ContentPresenter Grid.Row="1" />
                </Grid>
            </materialDesign:Card>
        </ControlTemplate>
    </ContentControl.Template>
</ContentControl>