Question

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?

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top