2014-01-20 144 views
1

我正在嘗試將我的listpicker的背景更改爲某些圖像。我正在尋找,我想這樣做,我必須實現我自己的listpicker版本,對不對?所以我從Windows Phone工具包下載了代碼,並從它和其他必要的東西中獲取了listpicker的代碼。我建立我的項目,它的工作,但問題是,我沒有矩形我在哪裏可以點擊查看listpicker中的選擇,但我有選擇的地方應該是那個矩形的列表。我做錯了什麼?我該如何解決這個問題。然後我想我可以更改ListPickerPage.xaml並使用PickerPageUri屬性。這樣對嗎?由於在全屏模式下更改Windows Phone Listpicker的背景顏色

編輯: 代碼在XAML頁面listpicker:

 <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

+0

添加一些屏幕截圖,最好是您已更改的xaml – FunksMaName

+0

我添加了一些代碼和問題的屏幕截圖。 –

+0

對不起!但是,是不是Listpicker就這樣打開了,而不需要用戶點擊然後打開? –

回答

2

使用此樣式,此顏色爲綠色的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> 

希望這有助於定製。

+0

我之前試圖這樣做,但它不工作。我只是添加相同的代碼,因爲我將樣式設置爲我的列表選擇器,但背景不是綠色,它像正常一樣是灰色的。 –

+0

是的,我需要WP7和WP8的解決方案。 –

+0

我在我的一個應用程序中使用了這種風格,這兩個應用程序都是針對操作系統及其完美工作的,爲了充分理解,我也附加了Listpicker。 –