ContentPresenter not displaying Custom Control in Style

Question

I have a Custom Control, NumericUpDown. I created a named style in which I want to extend the control, in this case by wrapping it in a Grid and adding a Label.

When I use the button as a basic example, I can extend upon the ControlTemplate just fine. The original Button is shown in the location of the ContentPresenter, and I can add other controls around it for layout and whatever.

ControlTemplate TargetType="{x:Type Button}">
    <Border BorderThickness="3" BorderBrush="Red" Background="{TemplateBinding Background}">
        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>
</ControlTemplate>

However when using my Custom Control, the ContentPresenter doesn't show the NumericUpDown control, it shows absolutely nothing. Even in its most basic form I can't get the ContentPresenter to show the Custom Control.

<Style x:Key="LabeledNumericUpDown2"  TargetType="{x:Type controls:NumericUpDown}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:NumericUpDown}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="5*"/>
                    </Grid.ColumnDefinitions>

                    <Label Grid.Column="0" Content="Blabla"/>
                    <ContentPresenter Grid.Column="1"/>
                    <!--<controls:NumericUpDown Grid.Column="1"/>-->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I can't for the life of me figure out what I am missing.

Thanks for your help, it is much appreciated!

Edit

The NumericUpDown Custom Control also has a default style that defines the NumericUpDown control. I wish to extend upon this with the named style.

<Style TargetType="{x:Type controls:NumericUpDown}">
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="Height" Value="18" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:NumericUpDown}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="16" />
                    </Grid.ColumnDefinitions>

                    <TextBox x:Name="PART_TextBox" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Padding="0" Margin="0" 
                        Text="{Binding DisplayValue, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />

                    <Border Grid.Column="1" BorderThickness="0 1 1 1" BorderBrush="#FFABADB3">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="8" />
                                <RowDefinition Height="8" />
                            </Grid.RowDefinitions>

                            <Button x:Name="PART_ButtonUp" Grid.Row="0" Content="▲" FontSize="4" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" BorderThickness="0" Padding="6 1 0 0" />
                            <Button x:Name="PART_ButtonDown" Grid.Row="1" Content="▼" FontSize="4" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" BorderThickness="0" Padding="6 1 0 0" />

                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

toadflakz toadflakz · Accepted Answer · 2016-11-18T13:13:07

Some Controls define and expect specific named elements to function correctly otherwise known as Parts.

Make sure that your ControlTemplate has provided the required parts for the Control in order for it to render correctly.

Edit:

Try this ControlTemplate to get you started.

<ControlTemplate TargetType="{x:Type controls:NumericUpDown}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*"/>
            <ColumnDefinition Width="5*"/>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0" Content="Blabla"/>

        <Grid Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="16" />
            </Grid.ColumnDefinitions>

            <TextBox x:Name="PART_TextBox" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Padding="0" Margin="0" 
                Text="{Binding DisplayValue, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />

            <Border Grid.Column="1" BorderThickness="0 1 1 1" BorderBrush="#FFABADB3">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="8" />
                        <RowDefinition Height="8" />
                    </Grid.RowDefinitions>

                    <Button x:Name="PART_ButtonUp" Grid.Row="0" Content="▲" FontSize="4" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" BorderThickness="0" Padding="6 1 0 0" />
                    <Button x:Name="PART_ButtonDown" Grid.Row="1" Content="▼" FontSize="4" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" BorderThickness="0" Padding="6 1 0 0" />

                </Grid>
            </Border>
        </Grid>
    </Grid>
</ControlTemplate>

ContentPresenter not displaying Custom Control in Style

1 Answers