Setting Same Colors for Light 7 Dark Theme

3 posts, 1 answers
  1. Aaron
    Aaron avatar
    13 posts
    Member since:
    Dec 2012

    Posted 25 Dec 2012 Link to this post

    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. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 28 Dec 2012 Link to this post

    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.
  3. DevCraft banner
  4. Aaron
    Aaron avatar
    13 posts
    Member since:
    Dec 2012

    Posted 05 Jan 2013 Link to this post

    Thank you!
Back to Top