Zmena poradia v ListView na Windows Phone 8.1

Začal som robiť univerzálnu appku pre Windows 8.1 a Windows Phone 8.1. Btw. práve dnes oficiálne prichádza Lumia Cyan. Dúfam, že po 925 príde čoskoro aj na 920. Ale späť k téme. Výhoda univerzálnych aplikácií je, že stačí napísať kód (C#, XAML) len raz a ten sa zdieľa v oboch projektoch pre Windows a Windows Phone. Len nedávno o tom vyšiel iný blog, tak sa o tom nebudem rozpisovať. Ja som zašiel ešte ďalej a maximum kódu som dal do Portable Assemblies, Ale o tom možno niekedy nabudúce.

Avšak nie je všetko také ružové, ako sa zdá. Štýly a templaty pre ListView control (predpokladám, že sa nájdu aj iné) sú dosť iné pre Windows a Windows Phone. Napríklad zonačený prvok v ListView na Windows Phone nie je vôbec zvýraznený. Nakoniec som to vyriešil jednoducho. Zobral som štýly zo stranok http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709922.aspx a http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709921.aspx, kde sú defaultne štýly pre Windows Store aplikácie.

Oveľa väčší problém bol zmena poradia prvkov pomocou drag&drop. Pre Windows Store aplikácie sa toto jednoducho dosiahne nastavením vlastností CanReorderItems a AllowDrop na true. Pekne to reaguje na myš a aj na dotyk. Ak užívateľ posúva prstom hore-dole, tak sa ListView scrolluje, a ak doľava-doprava, tak sa začne daný prvok presúvať na novú pozíciu.

Všetko je ale iné vo Windows Phone. Za prvé CanReorderItems vôbec nefunguje. Neskôr som našiel vlastnosť ReorderMode, ktorú treba nastaviť na Enabled. Táto vlastnosť je len vo verzii pre Windows Phone, takže sa nedá použiť v Portable Libraries. Avšak aj keď ju nastavíte, tak ListView nefunguje úplne podľa predstáv. Za prvé úplne sa vypne označenie prvkov, akoby SelectionMode = None. Za druhé to nefungovalo dobre v dlhom zozname, ktorý je potrebné aj scrollovať. Aj keď možno problém je, že som to skúšal len v emulátore a nie skutočnom zariadení. Myslím, že zámer bol, že štandardne sa pri pohybe prsta zoznam scrolluje, a keď podržím prst dlhšie na nejakej položke, tak sa začne presúvať na novú pozíciu. Lenže toto nefungovalo na 100% a pri rovnakých pohyboch sa raz presúvala položka a inokedy scrolloval zoznam.

Tak som sa rozhodol, že zoznam obohatím o ikonu, za ktorú môže užívateľ položku uchopiť a presunúť.

Zmena poradia na Windows Phone - screenshot 

Ako spraviť, že sa položka uchopí len keď sme prstom na ikone? Nechať len ikonu reagovať na vstupy dotyku/myši. Príklad DataTemplate pre položku.

<DataTemplate x:Key="CityTemplate">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="60" />

        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Vertical" Margin="8" IsHitTestVisible="False" VerticalAlignment="Center">

            <TextBlock Text="{Binding FullName}" FontSize="22" />

        </StackPanel>

        <Border Grid.Column="1" Background="Transparent" Width="60" Height="60" HorizontalAlignment="Center" VerticalAlignment="Center">

            <TextBlock FontSize="30" Opacity="0.7" FontFamily="Segoe UI Symbol"

                        HorizontalAlignment="Center" VerticalAlignment="Center">&#xE13C;</TextBlock>

        </Border>

    </Grid>

</DataTemplate>

Všimnite si, že StackPanel ma nastavené IsHitTestVisible na False. Toto spraví, že sa ignorujú dotyky. Tieto prebublajú do ItemsStackPanel, ktorý reprezentuje celý zoznam a ten to berie ako pokyny na scrollovanie. Ďalšia dôležitá vec je nastaviť pre Border Background na Transparent, aby sa na tomto mieste odchytil dotyk prstom a začalo sa presúvanie položky.

Aby to nebolo také jednoduché, tak štandardný template pre ListViewItem nám to celé kazí. Tu je tiež dôležité nastaviť, aby položka ignorovala dotyky. Čiže znova treba skopírovať štýl zo stránky vyššie a trochu ho upraviť.

  1. Pre štýl treba nastaviť vlastnosť Background na {x:Null}
  2. Pre Grid ReorderHintContent treba vyhodiť nastavenie Background
  3. Pre Rectangle SelectionBackground treba nastaviť IsHitTestVisible na False.

Výsledný štýl:

<!-- Style for Windows.UI.Xaml.Controls.ListViewItem -->

<Style TargetType="ListViewItem" x:Key="ListViewItemExpanded">

    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />

    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />

    <Setter Property="Background" Value="{x:Null}"/>

    <Setter Property="TabNavigation" Value="Local"/>

    <Setter Property="IsHoldingEnabled" Value="True"/>

    <Setter Property="Margin" Value="0,0,18,2"/>

    <Setter Property="HorizontalContentAlignment" Value="Left"/>

    <Setter Property="VerticalContentAlignment" Value="Top"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="ListViewItem">

                <Border x:Name="OuterContainer">

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal"/>

                            <VisualState x:Name="PointerOver">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="PointerOverBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"

                                                        Storyboard.TargetProperty="Fill">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"

                                                        Storyboard.TargetProperty="Stroke">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"

                                                        Storyboard.TargetProperty="Fill">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Pressed">

                                <Storyboard>

                                    <PointerDownThemeAnimation TargetName="ContentContainer" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="PointerOverPressed">

                                <Storyboard>

                                    <PointerDownThemeAnimation TargetName="ContentContainer" />

                                    <DoubleAnimation Storyboard.TargetName="PointerOverBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"

                                                        Storyboard.TargetProperty="Fill">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"

                                                        Storyboard.TargetProperty="Stroke">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"

                                                        Storyboard.TargetProperty="Fill">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Disabled">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="contentPresenter"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="{ThemeResource ListViewItemDisabledThemeOpacity}" />

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="FocusStates">

                            <VisualState x:Name="Focused">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Unfocused"/>

                            <VisualState x:Name="PointerFocused"/>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="SelectionHintStates">

                            <VisualState x:Name="VerticalSelectionHint">

                                <Storyboard>

                                    <SwipeHintThemeAnimation TargetName="SelectionBackground" ToVerticalOffset="15" ToHorizontalOffset="0" />

                                    <SwipeHintThemeAnimation TargetName="ContentBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />

                                    <SwipeHintThemeAnimation TargetName="SelectedBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />

                                    <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToVerticalOffset="15" ToHorizontalOffset="0" />

                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"

                                                        Storyboard.TargetProperty="Opacity"

                                                        Duration="0:0:0.500">

                                        <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />

                                        <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />

                                    </DoubleAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="HorizontalSelectionHint">

                                <Storyboard>

                                    <SwipeHintThemeAnimation TargetName="SelectionBackground" ToHorizontalOffset="-23" ToVerticalOffset="0" />

                                    <SwipeHintThemeAnimation TargetName="ContentBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />

                                    <SwipeHintThemeAnimation TargetName="SelectedBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />

                                    <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToHorizontalOffset="-23" ToVerticalOffset="0" />

                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"

                                                        Storyboard.TargetProperty="Opacity"

                                                        Duration="0:0:0.500">

                                        <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />

                                        <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />

                                    </DoubleAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="NoSelectionHint" />

                            <VisualStateGroup.Transitions>

                                <VisualTransition To="NoSelectionHint" GeneratedDuration="0:0:0.65"/>

                            </VisualStateGroup.Transitions>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="SelectionStates">

                            <VisualState x:Name="Unselecting">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Unselected">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="UnselectedPointerOver">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"

                                                        Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="UnselectedSwiping">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="SelectingGlyph"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="0.5" />

                                    <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Selecting">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="SelectionBackground"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="SelectedBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="SelectingGlyph"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"

                                                        Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Selected">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="SelectionBackground"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="SelectedBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"

                                                        Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="SelectedSwiping">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="SelectionBackground"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="SelectedBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"

                                                        Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="SelectedUnfocused">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="SelectionBackground"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="SelectedBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"

                                                        Storyboard.TargetProperty="Foreground">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="DragStates">

                            <VisualState x:Name="NotDragging" />

                            <VisualState x:Name="Dragging">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="InnerDragContent"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="{ThemeResource ListViewItemDragThemeOpacity}" />

                                    <DragItemThemeAnimation TargetName="InnerDragContent" />

                                    <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />

                                    <FadeOutThemeAnimation TargetName="SelectedBorder" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="DraggingTarget">

                                <Storyboard>

                                    <DropTargetItemThemeAnimation TargetName="OuterContainer" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="MultipleDraggingPrimary">

                                <Storyboard>

                                    <!-- These two Opacity animations are required - the FadeInThemeAnimations

                                on the same elements animate an internal Opacity. -->

                                    <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

                                    <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="1" />

 

                                    <DoubleAnimation Storyboard.TargetName="ContentBorder"

                                            Storyboard.TargetProperty="Opacity"

                                            Duration="0"

                                            To="{ThemeResource ListViewItemDragThemeOpacity}" />

                                    <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />

                                    <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />

                                    <DragItemThemeAnimation TargetName="ContentBorder" />

                                    <FadeOutThemeAnimation TargetName="SelectionBackground" />

                                    <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />

                                    <FadeOutThemeAnimation TargetName="SelectedBorder" />

                                    <FadeOutThemeAnimation TargetName="PointerOverBorder" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="MultipleDraggingSecondary">

                                <Storyboard>

                                    <FadeOutThemeAnimation TargetName="ContentContainer" />

                                </Storyboard>

                            </VisualState>

                            <VisualStateGroup.Transitions>

                                <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>

                            </VisualStateGroup.Transitions>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="ReorderHintStates">

                            <VisualState x:Name="NoReorderHint"/>

                            <VisualState x:Name="BottomReorderHint">

                                <Storyboard>

                                    <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Bottom" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="TopReorderHint">

                                <Storyboard>

                                    <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Top" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="RightReorderHint">

                                <Storyboard>

                                    <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Right" />

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="LeftReorderHint">

                                <Storyboard>

                                    <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Left" />

                                </Storyboard>

                            </VisualState>

                            <VisualStateGroup.Transitions>

                                <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>

                            </VisualStateGroup.Transitions>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="DataVirtualizationStates">

                            <VisualState x:Name="DataAvailable"/>

                            <VisualState x:Name="DataPlaceholder">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"

                                                        Storyboard.TargetProperty="Visibility"

                                                        Duration="0">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"

                                                        Storyboard.TargetProperty="Visibility"

                                                        Duration="0">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <Grid x:Name="ReorderHintContent">

                        <Path x:Name="SelectingGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckSelectingThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,9.5,9.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>

                        <Border x:Name="HintGlyphBorder"

                                Height="40"

                                Width="40"

                                HorizontalAlignment="Right"

                                VerticalAlignment="Top"

                                Opacity="0"

                                Margin="4">

                            <Path x:Name="HintGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckHintThemeBrush}" Height="13" Stretch="Fill"  Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>

                        </Border>

                        <Border x:Name="ContentContainer">

                            <Grid x:Name="InnerDragContent">

                                <Rectangle x:Name="PointerOverBorder"

                                            IsHitTestVisible="False"

                                            Opacity="0"

                                            Fill="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"

                                            Margin="1" />

                                <Rectangle x:Name="FocusVisual"

                                            IsHitTestVisible="False"

                                            Opacity="0"

                                            StrokeThickness="2"

                                            Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />

                                <Rectangle x:Name="SelectionBackground"

                                            Margin="4"

                                            Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"

                                            Opacity="0"

                                            IsHitTestVisible="False" />

                                <Border x:Name="ContentBorder"

                                        Background="{TemplateBinding Background}"

                                        BorderBrush="{TemplateBinding BorderBrush}"

                                        BorderThickness="{TemplateBinding BorderThickness}"

                                        Margin="4">

                                    <Grid>

                                        <ContentPresenter x:Name="contentPresenter"

                                                            ContentTransitions="{TemplateBinding ContentTransitions}"

                                                            ContentTemplate="{TemplateBinding ContentTemplate}"

                                                            Content="{TemplateBinding Content}"

                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                                            Margin="{TemplateBinding Padding}" />

                                        <!-- The 'Xg' text simulates the amount of space one line of text will occupy.

                                                In the DataPlaceholder state, the Content is not loaded yet so we

                                                approximate the size of the item using placeholder text. -->

                                        <TextBlock x:Name="PlaceholderTextBlock"

                                                    Opacity="0"

                                                    Text="Xg"

                                                    Foreground="{x:Null}"

                                                    Margin="{TemplateBinding Padding}"

                                                    IsHitTestVisible="False"

                                                    AutomationProperties.AccessibilityView="Raw"/>

                                        <Rectangle x:Name="PlaceholderRect"

                                                    Visibility="Collapsed"

                                                    Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>

                                        <Rectangle x:Name="MultiArrangeOverlayBackground"

                                                    IsHitTestVisible="False"

                                                    Opacity="0"

                                                    Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}" />

                                    </Grid>

                                </Border>

                                <Rectangle x:Name="SelectedBorder"

                                            IsHitTestVisible="False"

                                            Opacity="0"

                                            Stroke="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"

                                            StrokeThickness="{ThemeResource ListViewItemSelectedBorderThemeThickness}"

                                            Margin="4" />

                                <Border x:Name="SelectedCheckMarkOuter"

                                        IsHitTestVisible="False"

                                        HorizontalAlignment="Right"

                                        VerticalAlignment="Top"

                                        Margin="4">

                                    <Grid x:Name="SelectedCheckMark" Opacity="0" Height="40" Width="40">

                                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z"  Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>

                                        <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>

                                    </Grid>

                                </Border>

                                <TextBlock x:Name="MultiArrangeOverlayText"

                                            Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"

                                            Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"

                                            FontFamily="{ThemeResource ContentControlThemeFontFamily}"

                                            FontSize="26.667"

                                            IsHitTestVisible="False"

                                            Opacity="0"

                                            TextWrapping="Wrap"

                                            TextTrimming="WordEllipsis"

                                            Margin="18,9,0,0"

                                            AutomationProperties.AccessibilityView="Raw"/>

                            </Grid>

                        </Border>

                    </Grid>

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

 

Komentáre

# liero said:

Vidim tu moznost tvorby lepsich kontroliek pre universal app. Kedze ide telerik dolu vodou, co sa tyka kvality, je tu diera na trhu :)

Wednesday, July 16, 2014 1:58 PM
Prihlásiť | Registrovať | Pomoc