Изменение цвета фона списка Windows Phone в полноэкранном режиме

Я пытаюсь изменить фон моего списка на какое-то изображение. Я искал, и я думаю, что для этого я должен реализовать свою собственную версию списка, я прав? Поэтому я скачал код из инструментария Windows Phone и получил из него код для списка и других необходимых вещей. Я создаю свой проект, и он работает, но проблема в том, что у меня нет прямоугольника, где я могу щелкнуть, чтобы увидеть варианты выбора в списке, но у меня есть список с вариантами выбора, где должен быть только этот прямоугольник. Что я делаю неправильно? Как я могу решить эту проблему. Тогда я думаю, что мог бы изменить ListPickerPage.xaml и использовать свойство PickerPageUri. Это правильно? Спасибо

Изменить: код на странице 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.


person Libor Zapletal    schedule 20.01.2014    source источник
comment
Добавьте несколько скриншотов и, желательно, XAML, который вы изменили.   -  person FunksMaName    schedule 20.01.2014
comment
Я добавил немного кода и скриншот проблемы.   -  person Libor Zapletal    schedule 20.01.2014
comment
Извините! но открывается ли Listpicker как есть, и пользователю не нужно нажимать на него, а затем открывать?   -  person A.K.    schedule 20.01.2014
comment
Да, именно, но без стайлинга.   -  person Libor Zapletal    schedule 20.01.2014
comment
Можете ли вы помочь мне, как я могу это сделать? Просто хочу использовать изображение в качестве фона.   -  person Libor Zapletal    schedule 20.01.2014


Ответы (1)


Используйте этот стиль, он окрашивает 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

<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>

Надеюсь это поможет.

person A.K.    schedule 20.01.2014
comment
Раньше я пытался сделать это таким образом, но это не сработало. Я просто добавляю тот же код, что и вы. Я устанавливаю стиль в свой список, но фон не зеленый, а серый, как обычно. - person Libor Zapletal; 20.01.2014
comment
Я использую этот стиль в одном из своих приложений, которые нацелены как на ОС, так и на ее идеальную работу, для лучшего понимания я также прикрепляю Listpicker. - person A.K.; 20.01.2014
comment
используйте этот ListPicker и просто попробуйте связать его со списком строковых объектов и проверьте, работает ли он. - person A.K.; 20.01.2014
comment
Я просто использую тот же код, что и вы, в новом проекте, и он у меня не работает. Я получаю больший размер шрифта, но фон не меняется. У меня просто проблема с ItemCountThreshold. Я получаю сообщение об ошибке: свойство ItemCountThreshold не имеет доступного установщика. Возможно, проблема в том, что мы используем другой ListPicker. Я использую один из Windows Phone Toolkit. - person Libor Zapletal; 20.01.2014
comment
Тот же набор инструментов, разные версии, я думаю. - person A.K.; 20.01.2014