2014-01-20 2 views
1

내 listpicker의 배경을 일부 이미지로 변경하려고합니다. 나는 수색 중이었고 나는이 일을 위해 내 자신의 버전의 listpicker를 구현해야한다고 생각한다. 맞습니까? 그래서 Windows Phone 툴킷에서 코드를 다운로드하고 그로부터 listpicker 및 기타 필요한 것들에 대한 코드를 얻었습니다. 내 프로젝트를 빌드하고 작동하지만 문제는 내가 사각형을 가지고 있지 않아서 listpicker에서 선택 사항을 볼 수있는 곳을 클릭 할 수 있지만 그 사각형이 어디에 있어야하는지 선택 목록이 있습니다. 내가 뭘 잘못하고 있니? 이 문제를 어떻게 해결할 수 있습니까? 그런 다음 ListPickerPage.xaml을 변경하고 PickerPageUri 속성을 사용할 수 있다고 생각합니다. 맞아? 감사합니다전체 화면 모드에서 Windows Phone Listpicker의 배경색 변경

편집 : 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 .

+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

나는이 방법으로 만들려고했지만 전에는 효과가 없었습니다. 난 그냥 내 listpicker에 스타일을 설정하지만 같은 코드를 추가하지만 배경이 정상적인 회색처럼 녹색되지 않습니다. –

+0

예, WP7과 WP8 모두에서 작동하는 솔루션이 필요합니다. –

+0

나는이 스타일을 OS와 그 작업을 완벽하게 목표로하는 내 앱 중 하나에서 사용하고 있습니다. 잘 이해하기 위해 Listpicker도 첨부하고 있습니다. –