0

I have the following default style of the ListPicker control from the WPToolkit

<Style TargetType="toolkit:ListPicker" x:Key="ListPickerStyle1">
        <!--<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>-->
        <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:ListPicker">
                    <StackPanel>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="PickerStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                        Storyboard.TargetName="Border" 
                                        Storyboard.TargetProperty="Background" 
                                        Duration="0">
                                            <DiscreteObjectKeyFrame 
                                            Value="{StaticResource PhoneTextBoxEditBackgroundColor}" 
                                            KeyTime="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames 
                                        Storyboard.TargetName="Border" 
                                        Storyboard.TargetProperty="BorderBrush" 
                                        Duration="0">
                                            <DiscreteObjectKeyFrame 
                                            Value="{StaticResource PhoneTextBoxEditBorderBrush}" 
                                            KeyTime="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentControl 
                        Content="{TemplateBinding Header}" 
                        ContentTemplate="{TemplateBinding HeaderTemplate}" 
                        Foreground="{StaticResource PhoneSubtleBrush}" 
                        FontSize="{StaticResource PhoneFontSizeNormal}" 
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        Margin="0 0 0 8"/>
                        <Grid>
                            <Border 
                            x:Name="Border" 
                            Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding Background}" 
                            BorderThickness="2">
                                <Canvas x:Name="ItemsPresenterHost" MinHeight="46">
                                    <ItemsPresenter x:Name="ItemsPresenter">
                                        <ItemsPresenter.RenderTransform>
                                            <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
                                        </ItemsPresenter.RenderTransform>
                                    </ItemsPresenter>
                                </Canvas>
                            </Border>
                            <!--<Popup x:Name="FullModePopup">
                                <Border Background="{StaticResource PhoneChromeBrush}">
                                    --><!-- Popup.Child should always be a Border --><!--
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <ContentControl 
                                        Grid.Row="0" 
                                        Content="{TemplateBinding FullModeHeader}" 
                                        Foreground="{StaticResource PhoneForegroundBrush}" 
                                        FontFamily="{StaticResource PhoneFontFamilySemiBold}" 
                                        FontSize="{StaticResource PhoneFontSizeMedium}" 
                                        HorizontalAlignment="Left" 
                                        Margin="24 12 0 0"/>
                                        <ListBox 
                                        x:Name="FullModeSelector" 
                                        Grid.Row="1" 
                                        ItemTemplate="{TemplateBinding ActualFullModeItemTemplate}" 
                                        FontSize="{TemplateBinding FontSize}" 
                                        Margin="{StaticResource PhoneMargin}">
                                            <ListBox.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel/>
                                                    --><!-- Ensures all containers will be available during the Loaded event --><!--
                                                </ItemsPanelTemplate>
                                            </ListBox.ItemsPanel>
                                        </ListBox>
                                    </Grid>
                                </Border>
                            </Popup>-->
                        </Grid>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

But I would like to be able to add a border with a certain color based upon whether it is in the Expanded state or not. Also, the background needs to match the PhoneBackgroundBrush in the expanded state. Currently using this Style the Background does not change when the ListPicker is Expanded, and no border shows up whether the ListPicker is expanded or not. What can I do to change this?

1 Answer 1

0

Apply a template to your ListPicker

<toolkit:ListPicker Template="{StaticResource ListPickerControlTemplate1}">

Where ListPickerControlTemplate1 is a control template with Highlighted VisualState in which you can change the border brush, background color etc. In this case, I'm using a yellow background

<ControlTemplate x:Key="ListPickerControlTemplate1" TargetType="toolkit:ListPicker">
    <StackPanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="PickerStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Highlighted">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                          Storyboard.TargetName="UserControl"
                          Storyboard.TargetProperty="Foreground"
                          Duration="0">
                            <DiscreteObjectKeyFrame
                              Value="{StaticResource PhoneForegroundBrush}"
                              KeyTime="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                          Storyboard.TargetName="Border"
                          Storyboard.TargetProperty="Background"
                          Duration="0">
                            <DiscreteObjectKeyFrame
                              Value="{StaticResource PhoneBackgroundBrush}"
                              KeyTime="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                          Storyboard.TargetName="Border"
                          Storyboard.TargetProperty="BorderBrush"
                          Duration="0">
                            <DiscreteObjectKeyFrame
                              Value="Yellow"
                              KeyTime="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                ....
 ...........
</ControlTemplate>

I removed the ContentControl and some other parts from the control template because it's not so relevant.

3
  • thanks for your response. I just happened to get my style working right before you submitted your answer, although for some reason when the Phone's theme is dark, my border foreground is white but the current item's foreground text color is black as well which is making it invisible?
    – Matthew
    Feb 22, 2014 at 18:43
  • @Matthew Of course, if you set the background to black, make sure you properly change the foreground color of the text, too, so that it's visible.
    – Igor Ralic
    Feb 22, 2014 at 18:44
  • My ultimate goal is to only change the currently selected item's foreground color and border of the ListPicker when expanded, and then in all other cases have the default values show. So in this case, when in light theme, the border and ListPicker item shown have a dark foreground (which is good), but then in the dark theme the ListPicker's border is White whereas the item's foreground color is black (which is not good).
    – Matthew
    Feb 22, 2014 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.