This is a migrated thread and some comments may be shown as answers.

Setting Same Colors for Light 7 Dark Theme

2 Answers 58 Views
ListPicker
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Aaron
Top achievements
Rank 1
Aaron asked on 25 Dec 2012, 08:44 PM
I am using a dark background for all my pages so would like the same look and feel for the ListPicker whether it is in Light theme or Dark them.  The actual ListPicker background is White on Dark Theme and Black on Light Theme.  I would like the background to be white for ListPicker for both themes.

I have attached images ListPickerDark.png and ListPickerLight.png with this post.  I just want the control to look the same in both Dark and Light themes.  I would like the control to look like image ListPickerDark.png in both modes if that is possible.

I have got the following code so far:

xmlns
:Controls1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"

xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"

xmlns:telerikToggleSwitch="clr-namespace:Telerik.Windows.Controls.ToggleSwitch;assembly=Telerik.Windows.Controls.Primitives"


<Controls:RadListPicker BorderBrush="White" Background="White" Foreground="Black" PopupHeader="HEADER" InlineModeThreshold="7" Grid.Row="0" x:Name="MyList">

<Controls:RadListPicker.PopupItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<Rectangle Fill="{Binding Colour}" Width="43" Height="43"/>

<TextBlock Text="{Binding Name}" Margin="16 -8 0 0"/>

</StackPanel>

</DataTemplate>

</Controls:RadListPicker.PopupItemTemplate>

<Controls:RadListPicker.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<Rectangle Fill="{Binding Colour}" Width="24" Height="24"/>

<TextBlock Text="{Binding Name}" Foreground="Black" Margin="12 -3 0 0"/>

</StackPanel>

</DataTemplate>

</Controls:RadListPicker.ItemTemplate>

</Controls:RadListPicker>


Thanks for all your help :)

2 Answers, 1 is accepted

Sort by
0
Accepted
Todor
Telerik team
answered on 28 Dec 2012, 09:31 AM
Hi Aaron,

In order to change the Background, you have to edit the template of the control so that it better suits your needs. You can extract the default template from Blend or from the designer in Visual Studio 2012. Then just modify the Expanded state:
...
<VisualState x:Name="Expanded">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border"
    Storyboard.TargetProperty="Background" Duration="0">
            <DiscreteObjectKeyFrame
        Value="White" KeyTime="0" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border"
    Storyboard.TargetProperty="BorderBrush" Duration="0">
            <DiscreteObjectKeyFrame Value="{StaticResource PhoneTextBoxEditBorderBrush}"
        KeyTime="0" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>
...

Happy holidays!

All the best,
Todor
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Aaron
Top achievements
Rank 1
answered on 05 Jan 2013, 08:20 PM
Thank you!
Tags
ListPicker
Asked by
Aaron
Top achievements
Rank 1
Answers by
Todor
Telerik team
Aaron
Top achievements
Rank 1
Share this question
or