WP8 ListPicker前景

时间:2013-11-15 16:41:34

标签: xml windows-phone-8 listpicker

我正在尝试创建自定义的ListPicker。我需要ListPicker的前景始终为白色(当'Expanded'没有出现时)。然后,我需要自定义所选颜色,下拉列表的背景颜色和边框颜色。

到目前为止,除了ListPicker的前景色之外,我已经完成了所有工作。有没有办法在样式表上定位?我需要确保它同样适用于Dark和Light主题。

样式表

<phone:PhoneApplicationPage.Resources>
    <Style TargetType="toolkit:ListPicker">
        <!--<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>-->
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>
        <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="Highlighted">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                        Storyboard.TargetName="Border" 
                                        Storyboard.TargetProperty="Background" 
                                        Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>


                                        <ObjectAnimationUsingKeyFrames 
                                        Storyboard.TargetName="Border" 
                                        Storyboard.TargetProperty="BorderBrush" 
                                        Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <!-- Selected color -->
                                                    <SolidColorBrush Color="#1EAAF0"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="BorderBrush"
                                    Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White" Opacity=".5"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>

                                     </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="Transparent" 
                            BorderBrush="White" 
                            BorderThickness="3">
                                <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="White">
                                    <!-- Popup.Child should always be a Border -->
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <ContentControl 
                                        Grid.Row="0" 
                                        Content="{TemplateBinding FullModeHeader}" 
                                        Foreground="Black" 
                                        FontFamily="{StaticResource PhoneFontFamilySemiBold}" 
                                        FontSize="{StaticResource PhoneFontSizeMedium}" 
                                        HorizontalAlignment="Left" 
                                        Margin="24 12 0 0"/>
                                        <ListBox 
                                        x:Name="FullModeSelector" 
                                        Grid.Row="1" 
                                        ItemTemplate="{TemplateBinding ItemTemplate}"
                                        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>

<Style TargetType="toolkit:ListPickerItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="Padding" Value="8 6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:ListPickerItem">
                    <Grid x:Name="grid" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="ContentContainer"
                                    Storyboard.TargetProperty="Foreground"
                                    Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <!-- Regular color -->
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="ContentContainer"
                                    Storyboard.TargetProperty="Foreground"
                                    Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <!-- Selected color -->
                                                    <SolidColorBrush Color="#1EAAF0"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <ContentControl
                    x:Name="ContentContainer"
                    Content="{TemplateBinding Content}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Foreground="{TemplateBinding Foreground}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    Margin="{TemplateBinding Padding}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

ListPicker XML:

 <toolkit:ListPicker Name="GrowSelector" ItemsSource="{Binding Roles}" Foreground="White" BorderBrush="White" Margin="0,40,0,0" SelectionChanged="PickerSelectChanged" Opacity=".9">
                    <toolkit:ListPicker.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding roleName}" FontSize="26" LineHeight="19"/>
                            </StackPanel>
                        </DataTemplate>
                    </toolkit:ListPicker.ItemTemplate>
                </toolkit:ListPicker>
                <toolkit:ListPicker Name="DimSelector" Foreground="White" BorderBrush="White" Margin="0,24,0,0" IsEnabled="False" SelectionChanged="PickerDimChanged" Opacity=".9">
                    <toolkit:ListPicker.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding dimensionName}" FontSize="26" LineHeight="19"/>
                            </StackPanel>
                        </DataTemplate>

                    </toolkit:ListPicker.ItemTemplate>
                    <toolkit:ListPicker.FullModeItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding dimensionName}" FontSize="30" LineHeight="19"/>
                            </StackPanel>
                        </DataTemplate>

                    </toolkit:ListPicker.FullModeItemTemplate>

              </toolkit:ListPicker>

0 个答案:

没有答案