LongListMultiSelector 中项目之间的空间 [英] Space between items in LongListMultiSelector
问题描述
在我的 LongListMultiSelector 中，如何设置项目之间的垂直空间，使其不会被选择矩形覆盖?只需在下面的 XAML 中添加一个边距，该边距就会被矩形覆盖.
In my LongListMultiSelector, how can I set a vertical space between items such that it will not be covered by selection rectangle? Just adding a Margin like in XAML below will have that margin covered by rectangle.
<toolkit:LongListMultiSelector ItemsSource="{Binding Items}">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="Some Text" Margin="0,0,0,50" />
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
显示当我尝试选择一个项目时它的行为方式的图片.(注意蓝色矩形)
Picture that displayes how it behaves when I try to select an item. (pay attention to blue rectangle)
以下是标准邮件应用的示例，其中项目有一些空间，但选择矩形没有覆盖它.(这就是我想要的)
Here is an example of a standard Mail app where items have some space but selection rectangle does not cover it. (this is what I want)
推荐答案
这是关于基本 XAML 概念的一个非常重要的问题:ItemsControl 数据绑定.C# 中的所有 ItemsControls 都能够获取数据类(称为Items")并将它们转换为可视化 UIElements(称为Containers").例如，ListBox 可以从其 ItemSource 中获取 Items，创建新的 ListBoxItems 并将每个项目设置为其容器的 DataContext.这就是数据绑定对所有 ItemsControl 的基本工作方式.
This is a very important question on a fundamental XAML concept: ItemsControl databinding. All ItemsControls in C# have the ability to take data classes (known as "Items") and convert them to visual UIElements (known as "Containers"). For example ListBox can take Items from its ItemSource, create new ListBoxItems and set each item as the DataContext for its container. That's basically how databinding works for all ItemsControls.
为什么这么有趣?因为 LongListMultiSelector 是另一个 ItemsControl，它生成 LongListMultiSelectorItems.在 ListBoxItem 和 LongListMultiSelectorItem 的情况下，实例化的 DataTemplate 嵌套在 ItemTemplate 中，ItemTemplate 只是容器的一部分.但是，您无法从 DataTemplate 内部控制容器的属性.这就是为什么您在这里所做的一切似乎都不起作用.
Why is that interesting? Because LongListMultiSelector is yet another ItemsControl and it generates LongListMultiSelectorItems. Both in the case of ListBoxItem and LongListMultiSelectorItem the instantiated DataTemplate is nested inside the ItemTemplate which is only a part of the Container. However you can't control the properties of the container from inside the DataTemplate. Which is why nothing you're doing here seems to work.
解决方案:使用 ItemContainerStyle 更改容器本身的属性.
The solution: change properties on the Containers themselves using the ItemContainerStyle.
1) 在具有以下 C# 和 XAML 代码的项目中打开混合:
1) Open up blend in a project that has the following C# and XAML code:
this.DataContext = "foo bar baz".Split(' ');
<Toolkit:LongListMultiSelector ItemsSource="{Binding}">
<Toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</Toolkit:LongListMultiSelector.ItemTemplate>
</Toolkit:LongListMultiSelector>
2) 选择 LongListMultiSelector.在顶部菜单上选择对象 --> 编辑附加样式 --> 编辑 ItemContainerSyle --> 创建空"，然后点击确定".
2) Select the LongListMultiSelector. On the top menu choose "Object --> Edit Additional Style --> Edit ItemContainerSyle --> Create Empty" and hit "OK".
3) 由于 LongListMultiSelectorItem 在 Grid 和 List 之间更改其 ItemContainerStyle，因此您需要将样式中的所有 <Setter/> 元素手动替换为以下样式之一的所有 setter.例如，我将 LongListMultiSelectorItemListStyle 中的所有 setter 复制到我的新 LongListMultiSelectorItemStyle1 中.
3) Since LongListMultiSelectorItem changes its ItemContainerStyle between Grid and List you'll need to manually replace all the <Setter /> elements in your style with all the setters in one of the following styles. For example I copied over all the setters from LongListMultiSelectorItemListStyle into my new LongListMultiSelectorItemStyle1.
<Style x:Key="LongListMultiSelectorItemGridStyle" TargetType="controls:LongListMultiSelectorItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:LongListMultiSelectorItem">
<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">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectionTriangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectionCheck">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HasSelectionStates">
<VisualState x:Name="Opened">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectionRectangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OuterCover">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Closed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="1" >
<ContentControl x:Name="ContentContainer"
Margin="3"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
/>
<Rectangle x:Name="SelectionRectangle" Visibility="Collapsed"
Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="2"/>
<Polyline x:Name="SelectionTriangle" Visibility="Collapsed"
HorizontalAlignment="Right" VerticalAlignment="Top"
Points="50,0 50,50 0,0"
Fill="{StaticResource PhoneAccentBrush}"
/>
<Polyline x:Name="SelectionCheck" Visibility="Collapsed"
Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top"
Points="40,0 43,3 28,18 18,8 21,5 28,12"
Fill="{StaticResource PhoneForegroundBrush}"
/>
<Grid x:Name="OuterCover" IsHitTestVisible="True" Visibility="Collapsed" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LongListMultiSelectorItemListStyle" TargetType="controls:LongListMultiSelectorItem">
<Style.Setters>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:LongListMultiSelectorItem">
<Grid MinHeight="52">
<Grid.Resources>
<ExponentialEase EasingMode="EaseIn" Exponent="8" x:Key="ExponentialEaseIn"/>
<QuadraticEase EasingMode="EaseOut" x:Key="QuadraticEaseOut"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionEnabledStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ClosedToExposed"
From="Closed" To="Exposed"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExposedToClosed"
From="Exposed" To="Closed"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExposedToOpened"
From="Exposed" To="Opened"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-58" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ClosedToOpened"
From="Closed" To="Opened"
GeneratedDuration="0:0:0.15">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-58" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OpenedToClosed"
From="Opened" To="Closed"
GeneratedDuration="0:0:0.15">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="-58" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.15" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualStateGroup.States>
<VisualState x:Name="Closed"/>
<VisualState x:Name="Exposed">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel"
Duration="0" To="1.0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Opened">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox"
Duration="0" To="0"/>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter"
Duration="0" To="86"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="OuterCover">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel"
Duration="0" To="0.0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup.States>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Stretch" primitives:ClipToBounds.IsEnabled="True">
<ContentPresenter x:Name="Presenter">
<ContentPresenter.RenderTransform>
<CompositeTransform TranslateX="24"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<Rectangle x:Name="InnerHintPanel" Grid.Column="0" Width="24"
Height="{TemplateBinding HintPanelHeight}"
HorizontalAlignment="Left"
Fill="Transparent"
StrokeThickness="0">
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="24"/>
</Rectangle.RenderTransform>
</Rectangle>
<ContentControl x:Name="InfoPresenter" Grid.Column="1"
VerticalAlignment="Top"
Content="{TemplateBinding ContentInfo}"
ContentTemplate="{TemplateBinding ContentInfoTemplate}"/>
</Grid>
<Rectangle x:Name="OuterHintPanel" Width="24"
HorizontalAlignment="Left"
Height="{TemplateBinding HintPanelHeight}"
Fill="{TemplateBinding Background}"
StrokeThickness="0" Opacity="0.0"/>
<Grid x:Name="OuterCover" IsHitTestVisible="True"
Visibility="Collapsed" Background="Transparent"/>
<Canvas HorizontalAlignment="Left">
<CheckBox x:Name="SelectBox" VerticalAlignment="Top" Margin="12,-20,5,0" Visibility="Collapsed"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}">
<CheckBox.RenderTransform>
<CompositeTransform TranslateX="-58"/>
</CheckBox.RenderTransform>
</CheckBox>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
4) 确保修复 XMLNS 引用，例如 toolkit 和 primitives.
4) make sure to fix XMLNS references like toolkit and primitives.
5) 现在您可以编辑样式了.从顶部菜单转到对象 --> 编辑其他样式 --> 编辑 ItemContainerStyle --> 编辑当前".
5) Now you can edit the style. From the top menu go to "Object --> Edit Additional Styles --> Edit ItemContainerStyle --> Edit current".
6) 将 ItemContainerStyle Margin 从0"设置为0, 0, 50, 0".
6) Set the ItemContainerStyle Margin from "0" to "0, 0, 50, 0".
当我们使用修改后的 ItemContainerStyle 运行 LongListMultiSelector 时，我们可以看到项目之间的以下空间:
When we run our LongListMultiSelector with the modified ItemContainerStyle we can see the following space between items:
请务必记住，ItemContainerStyle 是我们武器库中非常强大的武器.我们可以使用 ItemContainerStyle 来编辑容器的样式甚至它们的模板.
It's important to remember that ItemContainerStyle is a very powerful weapon in our arsenal. We can use ItemContainerStyle to edit containers' style and even their templates.
这篇关于LongListMultiSelector 中项目之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
