我正在使用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>
基本上，我要实现的是创建一个看起来像滚动的列表选择器。当您单击它时，滚动会展开并显示所有选项。因此，我对使用全屏外观不感兴趣。
我还做了其他类似的尝试，但都取得了类似的失败，在这些尝试中，我使用设计的用户控件作为动画的顶部和底部滚动。但是，无法实现列表选择器的设计。
因此，我的问题是，是否有人使用用户控件设计了列表选择器，以便我可以覆盖它们，或者您可以指导我如何正确操作列表选择器。我使用了混合，扩展设计，Illustrator和XAML，因此，使用它们中的任何一种来设计列表选择器的方法都将不胜感激!
可视示例
所以这个想法是这样的:
这样，文本就在滚动条中，当您单击它时，滚动条会展开，并带有一个列表，您可以在其中滚动选择元素。
用户控件
Usercontrol of a scroll
图为概述
所选项目:
单击元素，然后出现一个列表:
这就是列表选择器的工作方式，我想要将其设计为滚动显示，而这一切都是从头开始或使用listpicker description工具进行的，这正是我想要的。但是，我并没有成功地使扩展看起来不错。
最佳答案
我已经做到最简单了。这个想法是这样的:Translate和Scale属性在状态之间设置动画，其他状态(例如Height等)则不设置动画。因此，让我们如下创建布局:
<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);
}
现在，您可以在出现和消失时在文本上添加淡入淡出，并更改图像的颜色等。但是这个想法已解决。
关于c# - 设计 list Picker Blend/Xaml，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29429769/