Question

我正在尝试将listpicker的背景更改为某些图片。我正在搜索，我想这样做我必须实现我自己的listpicker版本，我是对的吗？所以我从Windows Phone工具包下载了代码，并从中获取了listpicker的代码和其他必要的东西。我构建我的项目并且它正在工作，但问题是我没有矩形，我可以点击查看listpicker中的选项，但我有列表，其中的选项应该只是那个矩形。我做错了什么？我该如何解决这个问题。然后我想我可以更改ListPickerPage.xaml并使用PickerPageUri属性。这样对吗？感谢

修改带有listpicker的xaml页面代码：

        <customControls:ListPicker x:Name="LpkViolations" BorderBrush="{StaticResource PhoneForegroundBrush}"  
                        SelectionChanged="LpkViolations_OnSelectionChanged"
                        FullModeItemTemplate="{StaticResource LpkFullItemTemplate}"
                        ItemTemplate="{StaticResource LpkItemTemplate}"
                        PickerPageUri="/Design/CustomControls/ListPickerPage.xaml">

和资源：

<phone:PhoneApplicationPage.Resources>
        <converters:UpperConverter x:Key="upperConverter"></converters:UpperConverter>
        <DataTemplate x:Name="LpkItemTemplate">
            <TextBlock Text="{Binding Path=AppResources.add_user_violation_title, Source={StaticResource LocalizedStrings}}" />
        </DataTemplate>
        <DataTemplate x:Name="LpkFullItemTemplate">
            <Grid Margin="0,0,0,36">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Points}" FontSize="48" 
                           Foreground="DarkBlue"
                           VerticalAlignment="Top" 
                           HorizontalAlignment="Center"
                           Width="50"
                           Visibility="{StaticResource PhoneLightThemeVisibility}"/>
                <TextBlock Text="{Binding Points}" FontSize="48" 
                           Foreground="SkyBlue"
                           VerticalAlignment="Top" 
                           HorizontalAlignment="Center"
                           Width="50"
                           Visibility="{StaticResource PhoneDarkThemeVisibility}"/>
                <StackPanel Grid.Column="1" VerticalAlignment="Top" >
                    <TextBlock Text="{Binding Label}" TextWrapping="Wrap" 
                                           FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                                           HorizontalAlignment="Left" 
                                           VerticalAlignment="Top" FontSize="{StaticResource PhoneFontSizeMedium}" FontWeight="Bold"
                                           Foreground="{StaticResource PhoneForegroundBrush}"/>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Assets/Images/List/ic_fine.png" Visibility="{Binding FineVisibility}" 
                                       Margin="12,4" />
                        <TextBlock Text="{Binding FineToView}" TextWrapping="Wrap" 
                                               Opacity="0.65" FontSize="{StaticResource PhoneFontSizeNormal}"
                                               FontFamily="{StaticResource PhoneFontFamilyNormal}" 
                                               HorizontalAlignment="Left"
                                               Foreground="{StaticResource PhoneForegroundBrush}"
                                               VerticalAlignment="Center"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Assets/Images/List/ic_administrative_fine.png" Visibility="{Binding AdministrativeFineVisibility}"
                                       Margin="12,4" />
                        <TextBlock Text="{Binding AdministrativeFineToView}" TextWrapping="Wrap" 
                                               Opacity="0.65" FontSize="{StaticResource PhoneFontSizeNormal}"
                                               FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                               Foreground="{StaticResource PhoneForegroundBrush}"
                                               VerticalAlignment="Center"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

ListPickerPage.xaml与工具包中的完全相同：

<phone:PhoneApplicationPage 
    x:Class="BodovySystem.Design.CustomControls.ListPickerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True"
    shell:SystemTray.BackgroundColor="{StaticResource PhoneChromeColor}"
    toolkit:TiltEffect.IsTiltEnabled="True">

    <phone:PhoneApplicationPage.Resources>      
        <Style x:Key="ListBoxItemCheckedStyle" TargetType="ListBoxItem" >
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Margin" Value="-6 0 0 -1"/>
            <Setter Property="Padding" Value="12 0 0 0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>
            <Setter Property="FontSize" Value="43"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="LayoutRoot" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <CheckBox IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}" 
                                      Content="{TemplateBinding Content}" 
                                      x:Name="ContentContainer" 
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Foreground="{TemplateBinding Foreground}"
                                      FontFamily="{TemplateBinding FontFamily}"
                                      FontSize="{TemplateBinding FontSize}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Margin}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                                      Padding="{TemplateBinding Padding}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <Grid Background="{StaticResource PhoneChromeBrush}" x:Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!-- Header Title -->
        <TextBlock
            x:Name="HeaderTitle"
            Grid.Row="0"
            FontFamily="{StaticResource PhoneFontFamilySemiBold}"
            FontSize="{StaticResource PhoneFontSizeMedium}"
            Foreground="{StaticResource PhoneForegroundBrush}"
            Margin="24 12 12 12">
            <TextBlock.Projection>
                <PlaneProjection RotationX="-90"/>
            </TextBlock.Projection>
        </TextBlock> 

        <!-- List of Items -->
        <ListBox
            x:Name="Picker"
            Grid.Row="1"
            ItemsSource="{Binding}"
            Opacity="0"
            toolkit:TiltEffect.IsTiltEnabled="True"
            Margin="24 12 0 0" 
            Tap="OnPickerTapped"/>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="False">
            <shell:ApplicationBarIconButton
                IconUri="/Toolkit.Content/ApplicationBar.Check.png"
                Text="DONE"/>
            <shell:ApplicationBarIconButton
                IconUri="/Toolkit.Content/ApplicationBar.Cancel.png"
                Text="CANCEL"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

以下是结果：

ListPicker error

Answer 1

使用此样式，此颜色为Green中的fullModeGrid。您可以通过将图像作为背景来自定义 -

<Style TargetType="toolkit:ListPicker" x:Key="customStyle123">
        <Setter Property="Background" Value="White"/>
        <Setter Property="Foreground" Value="Black"/>
        <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>
                                    </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 -->
                                    <!-- Set the background of this grid to any image, I am setting it to GREEN -->
                                    <Grid Background="Green">
                                        <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 FullModeItemTemplate}"
                                            FontSize="{TemplateBinding FontSize}"
                                            Margin="{StaticResource PhoneMargin}">
                                            <ListBox.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel/>
                                                    <!-- Ensures Sall containers will be available during the Loaded event -->
                                                </ItemsPanelTemplate>
                                            </ListBox.ItemsPanel>
                                        </ListBox>
                                    </Grid>
                                </Border>
                            </Popup>
                        </Grid>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

另外，ListPicker UI声明

<toolkit:ListPicker ItemCountThreshold="1" Background="White" Width="180" Foreground="Black"  Style="{StaticResource customStyle123}" Name="lpkCategories" Height="67" VerticalAlignment="Top">
                                    <toolkit:ListPicker.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock FontSize="28" Text="{Binding}" HorizontalAlignment="Left" />
                                        </DataTemplate>
                                    </toolkit:ListPicker.ItemTemplate>
                                    <toolkit:ListPicker.FullModeItemTemplate>
                                        <DataTemplate>
                                            <TextBlock FontSize="36" Text="{Binding}" HorizontalAlignment="Left" />
                                        </DataTemplate>
                                    </toolkit:ListPicker.FullModeItemTemplate>
                                </toolkit:ListPicker>

希望这有帮助。

在全屏模式下更改Windows Phone Listpicker的背景颜色

1 个答案: