设计ListPicker混合/ Xaml

Question

我正在使用ListPicker，但很难让设计工作。我已经包括了我所做的测试：

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

基本上我想实现的是创建一个看起来像滚动的listpicker。当你点击它时，滚动展开并显示整个选项。因此，我对使用全屏外观不感兴趣。

我也做过类似的糟糕成功的其他尝试，我使用设计的usercontrols作为动画的顶部和底部的滚动。但是listpicker的设计是不可能的。

因此，我的问题是，如果有人有一个listpicker的设计，使用usercontrols，这样我可以重写它们，或者如果你可以指示我如何正确操纵listpicker。我已经使用混合，experssion设计，Illustrator和XAML，所以任何设计listpicker使用任何一种方法将非常感谢！

视觉例

这样的想法是这样的：

使得文本滚动里面，当你点击它，滚动里面列表扩展您可以滚动选择元素。

用户控件

Usercontrol of a scroll

图为概述

选择的项目：

单击元素，将显示一个列表：

这是一个listpicker的运作，我想将它设计一个滚动，要么全部是从头开始还是使用工具listpicker description，正是我所期待的。然而，我却没有成功地让扩展外观变得更好。

Answer 1

我已经让它变得最简单了。这个想法如下：翻译和缩放属性在状态之间动画，其他像高度等不是。因此，让我们创建一个类似下面的布局：

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

现在，让我们一些视觉状态添加到页面中，控制或者你需要什么

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

最后的代码隐藏的状态的变化

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); 
    } 

现在，您可以在出现和消失时在文本上添加淡入淡出，并更改图像的颜色等。但是这个想法已解决。