anzeigen Listview Artikel unter der Ansicht
Ich möchte einen Transparenzeffekt wie in der Groove Music App die Steuerleiste erstellen, wie in der Abbildung dargestellt. Die Bildlaufleiste scheint über dem blauen Balken zu enden, so dass der tatsächliche ListView nicht unter die Leiste zu gehen scheint. Wie also ist es möglich, den unsichtbaren Inhalt des ListView/ScrollViewers, der darunter verborgen ist, wieder sichtbar zu machen?
Wie @AVK sagte, die Benutzeroberfläche zu implementieren, wie im Bild gezeigt, wir die Scroll und Blue Bar in einem Gitter zuerst, dann setzen sie die Blue Bar des setzen kann eine OpacityVerticalAlignment-Bottom und geben. Die Blue Bar sollte eine feste Height haben.
Dann ist hier der Schlüsselpunkt Margin für den Inhalt und VerticalScrollBar in der ScrollViewer. Die VerticalScrollBar ist in der Vorlage ScrollViewer. Um die Vorlage von ScrollViewer zu ändern, können wir wählen Sie die „[Scroll]“ in „Dokumentgliederung“ und der rechten Maustaste und wählen Sie „Vorlagen bearbeiten“ → „Bearbeiten Sie eine Kopie ...“. Dann in der Vorlage, wir Margin für VerticalScrollBar wie einstellen:
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="0,0,0,64" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/>
wird nach einer vollständigen Probe zeigt dies:
<Page x:Class="UWPApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:UWPApp"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
<Setter Property="HorizontalScrollMode" Value="Auto"/>
<Setter Property="VerticalScrollMode" Value="Auto"/>
<Setter Property="IsHorizontalRailEnabled" Value="True"/>
<Setter Property="IsVerticalRailEnabled" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="ZoomMode" Value="Disabled"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollingIndicatorStates">
<VisualStateGroup.Transitions>
<VisualTransition From="MouseIndicator" To="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation BeginTime="0:0:3" TargetName="ScrollBarSeparator"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="TouchIndicator" To="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
</Storyboard>
</VisualState>
<VisualState x:Name="TouchIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseIndicator">
<Storyboard>
<FadeInThemeAnimation TargetName="ScrollBarSeparator"/>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/>
<Grid Grid.ColumnSpan="2" Grid.RowSpan="2"/>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="0,0,0,64" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/>
<ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
<Border x:Name="ScrollBarSeparator" Background="{ThemeResource ScrollViewerScrollBarSeparatorBackground}" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer Style="{StaticResource ScrollViewerStyle1}">
<StackPanel Margin="0,0,0,64">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="15" />
<Setter Property="Margin" Value="15" />
</Style>
</StackPanel.Resources>
<TextBlock>Test 1</TextBlock>
<TextBlock>Test 2</TextBlock>
<TextBlock>Test 3</TextBlock>
<TextBlock>Test 4</TextBlock>
<TextBlock>Test 5</TextBlock>
<TextBlock>Test 6</TextBlock>
<TextBlock>Test 7</TextBlock>
<TextBlock>Test 8</TextBlock>
<TextBlock>Test 9</TextBlock>
<TextBlock>Test 10</TextBlock>
<TextBlock>Test 11</TextBlock>
<TextBlock>Test 12</TextBlock>
</StackPanel>
</ScrollViewer>
<Rectangle Height="64" VerticalAlignment="Bottom" Fill="#FF0085FF" Opacity="0.8" />
</Grid>
</Page>
Und es sieht aus wie
Vielen Dank für Ihre Ideen, ich habe es ähnlich gelöst, aber es gibt eine wichtige Regel in UWP: NIEMALS ein ListView in einen ScrollViewer einbinden, weil es bei der Berührungsinteraktion auf einem mobilen Gerät extrem fehlerhaft ist. Also habe ich eine ListView Style Template erstellt. Der ListView-Stil enthält einen 'ScrollViewer' und einen' ItemsPresenter'. Im ScrollViewer habe ich die Eigenschaft 'Style =" {StaticResource ScrollViewerStyle1} ">' hinzugefügt und der Rand wird auf den ItemsPresenter – mjw
P.S. Es wäre schön, wenn Sie Ihre Lösung aktualisieren könnten, dass kein anderer die Idee hat, ein ListView in einen ScrollViewer zu stellen, weil es als W10M-Benutzer wirklich nervt. Es gibt immer noch viele Apps im Store, die das falsch machen. – mjw
Die hier verwendete 'ListView' dient nur der Übersichtlichkeit und da ich die Höhe von' ListView' nicht eingeschränkt habe, ist sie nicht scrollbar. Aber Sie haben Recht, eine 'ListView' in einen' ScrollViewer' zu bringen ist keine gute Übung. Für die Steuerelemente, die bereits 'ScrollViewer' in ihrer Vorlage haben, können wir einfach ihre Vorlage bearbeiten. Ich werde meine Antwort aktualisieren. Danke, dass du es aufgezeigt hast. –
beide Hinzufügen von Ihre ListView- und Blue Bar-Ansicht in einem Raster. Platziere die blaue Leiste vertikal nach unten. Mach die Deckkraft auf 0.50. das sollte aufpassen. – AVK
Nein, das ist der Punkt, ich möchte die ListView nicht zurückstellen, ich möchte die Items zeigen, die nach unten gescrollt wurden, sonst wäre die ListViews ScrollBar auch hinter der blauen Leiste und dem letzten Eintrag der Liste wäre nicht anklickbar. – mjw
Ich habe gerade bemerkt, dass, wenn das letzte Element nach oben gescrollt ist, ist ein kleiner Sprung in der Benutzeroberfläche auf Windows Phone. Das hat definitiv etwas mit einigen Triggern zu tun. – AVK