Add style to silverlight user control in wp7 silverlight

Question

I have a user control i created in silverlight (non wp7). I'm using this control in a WP7 app, and it works. My only problem is that the style of the control does not match the app style (it's background is white, the text boxes does fon't is the same as the text box color so it is not shown, etc'). Can I set the app style to the user control in XAML?

This is the XAML of the user control. I used my own colors (transparent, Black for background and white for foreground). I don't want to use the colors inside the control, I want to get them from the wp7 control that contains this control.

wp7:

<commonWpControls:MyUserControls  x:Name="myControl" DataContext="{Binding MyViewModel}" />

user control:

<Grid x:Name="LayoutRoot" Background="Transparent" VerticalAlignment="Stretch" >
    <StackPanel VerticalAlignment="Stretch">
        <StackPanel Orientation="Horizontal">
            <TextBlock x:Name="nameBlock" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="Name:" Foreground="White" />
            <TextBox x:Name="nameTextBox" Grid.Row="0" Grid.Column="1" Text="{Binding Path=Name}" Background="Black" Foreground="White" />
        </StackPanel>
        <StackPanel Grid.Row="3" Grid.Column="1" Background="Black" VerticalAlignment="Stretch" >
                <ListBox Margin="12,12,0,0" Name="listBox1" ItemsSource="{Binding Path=PropertiesCollection}" Background="Transparent" VerticalAlignment="Stretch" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding Key}" VerticalAlignment="Center" Grid.Column="0" Foreground="White"/>
                                <TextBox Text="{Binding Value, Mode=TwoWay}" Grid.Column="1" Background="Black" Foreground="White"/>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
        </StackPanel>

    </StackPanel>
</Grid>

Derek Lakin Derek Lakin · Accepted Answer · 2011-05-06T12:15:36

You can style controls in WP7 in exactly the same way that you can for Silverlight/WPF. Without seeing the XAML in question it's impossible to give you a working solution, but the approach is the same.

If you need more help, post the XAML for the control and highlight the areas that aren't the way you would like them to be.

UPDATE: You should switch from using UserControl to using Control instead so that you can create a "lookless" control that has a control tempalte that defines the appearance in generic.xaml. You can then use Background="{TemplateBinding Background}" to template bind to dependency properties on the control (Background and Foreground are already defined on Control). There's some great resources on lookless controls, ege. http://channel9.msdn.com/blogs/jbienz/creating-lookless-controls-for-wpf-and-silverlight

Add style to silverlight user control in wp7 silverlight

1 Answers