CODEWITHSUNDEEP
xamlwindows-phone-8.1
SharpShade
SharpShade

Reputation: 2183

UserControl style only visible in designer

I'd like to have page headers in my app with either an icon or text centered in a 50px high bar at the top of the page. Optionally with a back-button.

For this reason I use a UserControl on each page which gets either one of those styles applied: PageHeaderStyle or PageHeaderBackStyle.

My implementation of one of those is the following (style definition in my App.xaml):

   <Style x:Key="PageHeaderBaseStyle" TargetType="UserControl">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Height" Value="50" />
        <Setter Property="Width" Value="NaN" />
        <Setter Property="Background" Value="{StaticResource CDColor}" />
    </Style>

    <Style x:Key="PageHeaderStyle" TargetType="UserControl" BasedOn="{StaticResource PageHeaderBaseStyle}">
        <Setter Property="Content">
            <Setter.Value>
                <Grid Background="{StaticResource CDColor}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{StaticResource MainPageModel}">
                    <TextBlock Style="{StaticResource PageHeaderTextBlockStyle}" Text="{Binding Title}" Visibility="{Binding TitleVisibility}" />
                    <Image Style="{StaticResource PageHeaderIconStyle}" Source="{Binding Icon}" Visibility="{Binding IconVisibility}" />
                </Grid>
            </Setter.Value>
        </Setter>
    </Style>

Applied like it should be:

<UserControl Style="{StaticResource PageHeaderStyle}" />

Now first I had used "Template" and applied a DataTemplate with the grid component. But this didn't work. Then I changed it to directly set the Content of the UserControl. This does work: After building the designer shows the page header (before it showed only the blue selection border, but no content - it was transparent).

But as soon as I start debugging the app on the emulator it disappears and the running app only shows a blank spot where it should be.

Why is this so? I mean after all the designer already shows it, why does it disappear then, though?

FYI: I do not get any binding exceptions nor any other. It just doesn't show up.

PS: I tried setting the Background in the base style while setting the grid's background to transparent. This didn't work either - only a blank spot.

Upvotes: 0

Views: 87

Answers (1)

SharpShade
SharpShade

Reputation: 2183

Solved the problem: Best approach is probably to use a ContentControl. Using the Content property did not work, though. You have to use the ContentTemplate property. Using that one does work just fine.

Upvotes: 1

Related Questions