LongList Multi Selector:如何从左到右更改Checkbox的位置?

时间:2013-08-18 12:13:21

标签: xaml windows-phone-8 windows-phone

当我设置IsSelectionEnabled = true时,这就是我的LongListMultiSelector在WP8应用程序上的显示方式

默认情况下,左侧显示复选框。如何更改它以显示在右侧?

enter image description here

XAML代码:

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="GHATIKA" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="cities" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">


            <toolkit:LongListMultiSelector x:Name="AddrBook" 
                                        JumpListStyle="{StaticResource AddrBookJumpListStyle}"
                                        Background="Transparent"
                                        GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
                                        ItemTemplate="{StaticResource AddrBookItemTemplate}"
                                        LayoutMode="List"
                                        IsGroupingEnabled="true"
                                        HideEmptyGroups ="true"/>
        </Grid>
    </Grid>

<DataTemplate x:Key="AddrBookItemTemplate">
    <StackPanel VerticalAlignment="Top">
        <TextBlock FontWeight="Bold"  Text="{Binding FirstName}" />
        <TextBlock Text="{Binding LastName}" />
        <TextBlock Text="{Binding Address}" />
        <TextBlock Text="{Binding Phone}" />
    </StackPanel>
</DataTemplate>

<DataTemplate x:Key="AddrBookGroupHeaderTemplate">
    <Border Background="Transparent" Margin="12,8,0,8">
        <Border Background="{StaticResource PhoneAccentBrush}"  
                                Padding="8,0,0,0" Width="62" Height="62"                 
                                HorizontalAlignment="Left">
            <TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6" 
    FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Border>
    </Border>
</DataTemplate>


<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
    <Setter Property="GridCellSize"  Value="113,113"/>
    <Setter Property="LayoutMode" Value="Grid" />
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="Auto" Height="Auto" Margin="6" >
                    <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" 
                               Margin="8,0,0,0" Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Bottom"/>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

1 个答案:

答案 0 :(得分:3)

所以坏消息是,Phone Toolkit开发团队决定只为LongListMultiSelectorItem创建一个INTERNAL属性,这样它总是看起来像你在邮件应用程序中找到它一样。这意味着您无法使用预先构建的DLL来覆盖样式...

好消息是它是开源的。所以你可以改变它,不利的一面是你必须在你的源代码中保留整个工具包的副本,如果你想用更新的工具包副本进行更新,你必须手动合并它。我们总是可以向他们提出变更请求,看看他们是否愿意为我们改变这一点,但与此同时,如果你仍然想要这样做,你将不得不尝试以下选项之一:

如果您希望LongListMultiSelector的所有实例都具有右对齐的复选框,那么您需要做的就是在Themes / Generic.xaml文件中编辑名为“LongListMultiSelectorItemListStyle”的样式(最好使用混合,因为您可以移动周围的事情更容易,看到控件的视觉状态 - 但我注意到自己尝试这个混合将重命名视觉状态并在前面添加1,你会想要删除它们,并了解状态之间的动画变化)。

如果您想要一个更好的解决方案,只允许您为控件的单个实例创建自己的模板,我建议您转到LongListMultiSelector并将DefaultListItemContainerStyleProperty和DefaultGridItemContainerStyleProperty(以及它们的支持字段)更改为public和然后你可以在你的代码中执行类似下面的操作(这只是从左到右的样式的反向,它可能不适合你想要的,因为当复选框飞出时,内容也向右移动):

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit">
<!-- Resource dictionary entries should be defined here. -->
<Style TargetType="controls:LongListMultiSelector">
    <Setter Property="DefaultListItemContainerStyle" Value="{StaticResource RightLongListMultiSelectorItemListStyle}"/>
</Style>

<Style x:Key="RightLongListMultiSelectorItemListStyle" 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="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="-68" 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="-68" 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="-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="-68"/>
                                        <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="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <ContentControl x:Name="InfoPresenter" 
                                VerticalAlignment="Top"
                                Content="{TemplateBinding ContentInfo}"
                                ContentTemplate="{TemplateBinding ContentInfoTemplate}"/>
                            <Grid Grid.Column="1" 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="1" Width="24"
                                Height="{TemplateBinding HintPanelHeight}"
                                HorizontalAlignment="Right"
                                Fill="Transparent"
                                StrokeThickness="0">
                                <Rectangle.RenderTransform>
                                    <CompositeTransform TranslateX="-24"/>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
                        <Rectangle x:Name="OuterHintPanel" Width="24"
                                   HorizontalAlignment="Right"
                                   Height="{TemplateBinding HintPanelHeight}"
                                   Fill="{TemplateBinding Background}"
                                   StrokeThickness="0" Opacity="0.0"/>
                        <Grid x:Name="OuterCover" IsHitTestVisible="True"
                              Visibility="Collapsed" Background="Transparent"/>
                        <Canvas HorizontalAlignment="Right">
                            <CheckBox x:Name="SelectBox" VerticalAlignment="Top" Margin="12,-20,5,0"
                                      IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}" Visibility="Collapsed">
                                <CheckBox.RenderTransform>
                                    <CompositeTransform TranslateX="0"/>
                                </CheckBox.RenderTransform>
                            </CheckBox>
                        </Canvas>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>