Tasarım ListesiPicker Blend/Xaml

Question

ListPicker kullanıyorum, ancak tasarımı çalışmak için zor bir zaman geçiriyorum.

<ControlTemplate x:Key="listpicker_style" TargetType="toolkit:ListPicker"> 
     <StackPanel> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="PickerStates"> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="Highlighted"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="UserControl" 
           Storyboard.TargetProperty="Foreground" 
           Duration="0"> 
           <DiscreteObjectKeyFrame 
            Value="{StaticResource PhoneTextBoxForegroundBrush}" 
            KeyTime="0"/> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="Border" 
           Storyboard.TargetProperty="Background" 
           Duration="0"> 
           <DiscreteObjectKeyFrame 
            Value="{StaticResource PhoneTextBoxEditBackgroundColor}" 
            KeyTime="0"/> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="Border" 
           Storyboard.TargetProperty="BorderBrush" 
           Duration="0"> 
           <DiscreteObjectKeyFrame 
            Value="{StaticResource PhoneTextBoxEditBorderBrush}" 
            KeyTime="0"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Disabled"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="Border" 
           Storyboard.TargetProperty="Background" 
           Duration="0"> 
           <DiscreteObjectKeyFrame 
            Value="{StaticResource TransparentBrush}" 
            KeyTime="0"/> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="Border" 
           Storyboard.TargetProperty="BorderBrush" 
           Duration="0"> 
           <DiscreteObjectKeyFrame 
            Value="{StaticResource PhoneDisabledBrush}" 
            KeyTime="0"/> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="UserControl" 
           Storyboard.TargetProperty="Foreground" 
           Duration="0"> 
           <DiscreteObjectKeyFrame 
            Value="{StaticResource PhoneDisabledBrush}" 
            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> 
       <Rectangle Fill="#FFEAC726" HorizontalAlignment="Left" Height="52" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/> 
       <Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/> 
       <Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,43,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/> 
       <Border x:Name="Border" 
        Background="{TemplateBinding Background}" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}" Opacity="0"> 
        <UserControl x:Name="UserControl" Foreground="{TemplateBinding Foreground}" Margin="7,-3,-7,3"> 
         <StackPanel> 
          <TextBlock x:Name="MultipleSelectionModeSummary" Margin="8 8 0 8" /> 
          <Canvas x:Name="ItemsPresenterHost" MinHeight="46"> 
           <ItemsPresenter x:Name="ItemsPresenter"> 
            <ItemsPresenter.RenderTransform> 
             <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/> 
            </ItemsPresenter.RenderTransform> 
           </ItemsPresenter> 
          </Canvas> 
         </StackPanel> 
        </UserControl> 
       </Border> 
      </Grid> 
     </StackPanel> 
    </ControlTemplate> 

Javascipt ne başarmak istiyorum bir tomar gibi görünen bir listpicker oluşturmaktır: Ben yaptım testi dahil ettik. Tıkladığınızda, kaydırma genişler ve tüm seçenekleri gösterir. Bu yüzden tam ekran görüntüsünü kullanmakla ilgilenmiyorum.

Ayrıca animasyonlar için yukarı ve aşağı kaydırılmış olarak tasarlanmış usercontrols kullandığım benzer kötü başarı ile başka denemeler yaptım. Ancak liste listesinin tasarımının yapılması imkansızdı.

Sorunun nedeni, birisinin listeyi değiştiren bir kullanıcı listesi varsa, bunları geçersiz kılabileceğim ya da liste hazırlayıcısını doğru bir şekilde nasıl değiştirebileceğime yönlendirebilmem için usercontrols kullanmasıdır. Harmanlama, genişletme tasarımı, Illustrator ve XAML kullanıyorum, bu yüzden herhangi birini kullanarak listpicker'ı tasarlamak için herhangi bir yöntem çok takdir edilecektir!

Görsel Örnek

Yani fikrin böyle bir şeydir: Metin kaydırma içinde olan

Öyle ki, bunu tıkladığınızda, kaydırma içinde bir liste ile genişler öğeleri seçmek için kaydırma yapabilirsiniz.

UserControl

Usercontrol of a scroll

Resimde Bakış

seçilen Öğe:

elemanı ve bir liste tıklayın görünür:

Bu listpicker ben de bütün sıfırdan veya aracını listpicker description kullanarak, bir kaydırma olarak tasarlamak istiyorum işliyor, aradığım şeydir. Ancak, genişleyen görünümü güzelleştirmeyi başaramadım.

Answer 1

Yapabileceğim en basit olanı yaptım. Fikir şu şekildedir: Çevir ve Ölçek özellikleri devletler arasında, diğerlerinin yüksekliği vb. Arasında animasyonludur. O halde aşağıdaki gibi Düzeni yaratalım: en sayfa, kontrol bazı görsel durumlarını ekleyebilir veya durumların değişimi için nihayet

<VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="VisualStateGroup"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0:0:0.5"/> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Expanded"/> 
      <VisualState x:Name="Collapsed"> 
       <Storyboard> 
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentGrid" d:IsOptimized="True"/> 
        <DoubleAnimation Duration="0" To="-400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BottomGrid" d:IsOptimized="True"/> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

Ve codebehind gerekenleri izin Şimdi

<StackPanel Width="500"> 
     <Grid x:Name="HeaderGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped"/> 
     <Grid VerticalAlignment="Top" x:Name="ContentGrid" Height="400" Background="BlanchedAlmond" RenderTransformOrigin="0.5,0"> 
      <Grid.RenderTransform> 
       <CompositeTransform/> 
      </Grid.RenderTransform> 
      <ScrollViewer> 
       <ItemsControl> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <TextBlock Text="{Binding}" Tapped="TextBlock_Tapped"/> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
        <ItemsControl.Items> 
         <x:String>One</x:String> 
         <x:String>Two</x:String> 
         <x:String>Three</x:String> 
        </ItemsControl.Items> 
       </ItemsControl> 
      </ScrollViewer> 
     </Grid> 
     <Grid x:Name="BottomGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped" RenderTransformOrigin="0.5,0.5"> 
      <Grid.RenderTransform> 
       <CompositeTransform/> 
      </Grid.RenderTransform> 
     </Grid> 
    </StackPanel> 

private void HeaderGrid_Tapped(object sender, TappedRoutedEventArgs e) 
    { 
     CheckState(); 
    } 
    private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e) 
    { 
     var value = (sender as FrameworkElement).DataContext; 

     CheckState(); 
    } 
    private void CheckState() 
    { 
     if ((ContentGrid.RenderTransform as CompositeTransform).ScaleY > 0) 
      VisualStateManager.GoToState(this, "Collapsed", true); 
     else 
      VisualStateManager.GoToState(this, "Expanded", true); 
    } 

Şimdi, görüntülendiğinde ve kaybolduğunda metne soluk ekleyebilir ve görüntülerdeki renkleri değiştirebilirsin. Ancak bu fikir çözüldü.