×
Namespaces

Variants
Actions

创建类似CheckBoxGroup的多选ListBox

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
Xinx Gong 在 22 Oct 2012 创建
最后由 hamishwillee 在 03 Jul 2013 编辑

Contents

介绍

1.新建一个Windows Phone Application工程,命名为MultiListBoxSample。

2.新建示例数据源。

i.在工程中添加如下的类。

public class SampleData 
{
public SampleData()
{
items.Add("刘备");
items.Add("关羽");
items.Add("张飞");
items.Add("赵云");
items.Add("黄忠");
items.Add("马超");
}
 
private ObservableCollection<string> _items;
public ObservableCollection<string> items
{
get
{
if (null == _items)
{
_items = new ObservableCollection<string>();
}
return _items;
}
}
}

ii.在MainPage.xaml文件中添加命名空间的引用:

xmlns:local="clr-namespace:MultiListBoxSample"

iii.在MainPage.xaml中新建资源:

<phone:PhoneApplicationPage.Resources> 
<local:SampleData x:Key="sampleData"/>
</phone:PhoneApplicationPage.Resources>

3.在页面中加入一个ListBox,设置选中方式为多选,并为其指定DataContext和ItemsSource。

<ListBox DataContext="{StaticResource sampleData}" ItemsSource="{Binding items}" SelectionMode="Multiple"/>

4.当前已经完成了ListBox的多选功能,但是为了能直观显示,我们可以加上一个类似CheckBox的壳。

i.创建ListBoxItemStyle。如下图:

Multilistbox pic 0.png

ii.在模版中可以看见LayoutRoot(Border类型)和ContentContainer(ContentControl类型)。我们可以在这个模版中加上一个CheckBox,并设置该CheckBox不可点击(IsHitTestVisible="False")如下图所示。

Multilistbox pic 1.png

iii.为了使CheckBox能显示当前的选中状态,我们还需要在State中做一些处理。

Multilistbox pic 2.png
SelectedUnfocused:ListBox失去焦点时的选中Item的状态
Unselected:非选中Item状态
Selected:ListBox获得焦点时的选中Item状态

在SelectedUnfocusd和Selected状态设置CheckBox选中,Unselected状态设置CheckBox不选中。

iv.最终完成的ListBoxItemStyle代码如下:

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem"> 
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<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">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ToggleButton.IsChecked)" Storyboard.TargetName="checkBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>False</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ToggleButton.IsChecked)" Storyboard.TargetName="checkBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ToggleButton.IsChecked)" Storyboard.TargetName="checkBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid>
<CheckBox x:Name="checkBox" IsHitTestVisible="False"/>
</Grid>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" d:LayoutOverrides="Width, Height" Grid.Column="1" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

5.完成以上步骤就完成了一个类似CheckBoxGroup的多选ListBox。

运行结果和源代码

Multilistbox pic 3.png

源代码: File:Multilistbox sample.zip

This page was last modified on 3 July 2013, at 03:54.
79 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×