Styling Windows Phone 8.1 UserControl

Question

I have the following UserControl in a Windows Phone 8.1 Project:

<UserControl
x:Name="AuditItem"
x:Class="WindowsPhone.OverviewAuditItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WindowsPhone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="Auto" 
Tapped="AuditItem_Tapped"
Style="{StaticResource MyUserControlStyle}">

<Grid x:Name="contentGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Height="160" >
        <TextBlock x:Name="textAuditName" Margin="10,10,0,0" TextWrapping="Wrap" Text="Audit Name" VerticalAlignment="Top"/>
        <TextBlock x:Name="textCreatedDate" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center"/>
        <TextBlock x:Name="textLastOpened" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" />
        <!--<Button Content="This styling works but the UC style doesn't"
                Height="100"
                Style="{StaticResource MyButtonStyle}" />-->
        <StackPanel Orientation="Horizontal" Grid.Column="2">
            <TextBlock x:Name="textDeadline" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Grid.Column="2"/>
            <Grid x:Name="blockOverdue" Margin="10,0,0,0">
                <Image Source="PNGs/alerticon.png" Stretch="None" HorizontalAlignment="Center" />
            </Grid>
        </StackPanel>
        <TextBlock x:Name="textTemplate" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center"   Grid.Column="3"/>

    </StackPanel>
</Grid>

I have defined my style in the App.xaml file:

<Style TargetType="local:OverviewAuditItem" x:Key="MyUserControlStyle" >
            <Setter Property="Background" Value="Blue" />
            <Setter Property="FontFamily" Value="Arial Black" />
            <Setter Property="FontSize" Value="36" />
        </Style>

I know that the Style is being "found" because I don't get the "Resource could not be resolved" error (which I do get if I change the name for a test)

None of the styling is being applied though. I expected the UserControl background to be blue and all textblocks on the control to use the text size and family. I'm pretty new to this so maybe it doesn't work like this.

My questions: Should it work like I'm assuming? if yes, then where am I going wrong, if no, then how do I apply styling to a UserControl?

As a test - you can see I have a commented out button, the styling for this does work.

User1 User1 · Accepted Answer · 2015-04-14T10:20:26

So your Style is targeting the wrong Type to get what I think you are asking for you will need to do this:

This Targets any UserControl's that use the MyUserControlStyle key

<Style TargetType="UserControl" x:Key="MyUserControlStyle" >
     <Setter Property="Background" Value="Blue" />
</Style>

This Targets all TextBlocks on the Page - Notice no key here so it targets all textblocks. To target individual TextBlocks add a key and implement it in the TextBlocks Style property

<Style TargetType="TextBlock" >
     <Setter Property="FontFamily" Value="Arial Black" />
     <Setter Property="FontSize" Value="36" />
</Style>

For more info on WPF styles take a look here

Styling Windows Phone 8.1 UserControl

1 Answers