UWP中實現大爆炸效果（二）
阿新 • • 發佈：2018-05-28
cti setter val sele osi enume rail += ddd 
上一回實現了一個寬度不均勻的Panel，這次我們編寫一個簡單的BigbangView主體。
首先創建一個模板化控件，刪掉Themes/Generic.xaml中的<Style TargetType="BigbangView">...</Style>段。
然後打開C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(SDK版本)\Generic\generic.xaml，在裏面找到
<Style TargetType="ListViewItem" x:Key="ListViewItemExpanded"> ... </Style> <Style TargetType="ListView"> ... </Style>
這兩段，復制到項目中Themes/Generic.xaml中，將TargetType="ListView"修改為TargetType="BigbangView"，添加Setter：
<Setter Property="SelectionMode" Value="Multiple"></Setter> <Setter Property="HorizontalAlignment" Value="Stretch"View Code></Setter> <Setter Property="VerticalAlignment" Value="Center"></Setter> <Setter Property="IsTabStop" Value="False" /> <Setter Property="TabNavigation" Value="Once" /> <Setter Property="IsSwipeEnabled" Value="True" /> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"Value="Disabled" /> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" /> <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" /> <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" /> <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" /> <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" /> <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /> <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" /> <Setter Property="UseSystemFocusVisuals" Value="True" /> <Setter Property="ItemContainerTransitions"> <Setter.Value> <TransitionCollection> <AddDeleteThemeTransition /> <ContentThemeTransition /> <ReorderThemeTransition /> <EntranceThemeTransition IsStaggeringEnabled="False" /> </TransitionCollection> </Setter.Value> </Setter> <Setter Property="ItemContainerStyle"> <Setter.Value> <Style TargetType="ListViewItem"> 前面復制的ListViewItemExpanded的內容剪貼到這裏 </Style> </Setter.Value> </Setter> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <control:BigbangPanel > <control:BigbangPanel.ChildrenTransitions> <TransitionCollection> <AddDeleteThemeTransition /> </TransitionCollection> </control:BigbangPanel.ChildrenTransitions> </control:BigbangPanel> </ItemsPanelTemplate> </Setter.Value> </Setter>
其中BigbangPanel是咱們上回書寫的面板。
然後打開BigbangView.cs，修改基類：
public sealed class BigbangView : ListView
{
public BigbangView()
{
this.DefaultStyleKey = typeof(BigbangView);
}
}
接下來就是整個過程中最復雜，最枯燥的部分，編寫按下滑動選中。
先打開安卓版的大爆炸（不是錘子的可以拿個安卓手機下載IT之家客戶端看效果），對整個過程進行分析發現，有以下幾種狀態。
1、點擊選中；
2、Panel高度小於控件高度，也就是ScrollViewer不啟用時，按下向四周滑動可以更改選中狀態；
3、Panel高度大於控件高度，上下滑動可以滾動ScrollViewer，左右滑動禁用ScrollViewer的滾動並且更改選中狀態 。
這篇文章先實現鼠標的操作。由於鼠標在頁面上下滑動並不會觸發ScrollViewer的滾動，所以在此不考慮第三項。
首先修改Style中的Template段，
<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="control:BigbangView"> <Border x:Name="RootBorder" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"> <ScrollViewer x:Name="ScrollViewer" TabNavigation="{TemplateBinding TabNavigation}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" AutomationProperties.AccessibilityView="Raw"> <Grid x:Name="ItemsGrid" Background="Transparent" ManipulationMode="System"> <ItemsPresenter Header="{TemplateBinding Header}" HeaderTemplate="{TemplateBinding HeaderTemplate}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Footer="{TemplateBinding Footer}" FooterTemplate="{TemplateBinding FooterTemplate}" FooterTransitions="{TemplateBinding FooterTransitions}" Padding="{TemplateBinding Padding}"/> </Grid> </ScrollViewer> </Border> </ControlTemplate> </Setter.Value> </Setter>View Code
在後臺代碼中重載OnApplyTemplate()（實際應該做空判斷，我偷懶了）
public BigbangView()
{
this.DefaultStyleKey = typeof(BigbangView);
this.Loaded += BigbangView_Loaded;
this.Unloaded += BigbangView_Unloaded;
this.SelectionChanged += BigbangView_SelectionChanged;
PointerPressedHandler = new PointerEventHandler(_PointerPressed);
PointerReleasedHandler = new PointerEventHandler(_PointerReleased);
PointerMovedHandler = new PointerEventHandler(_PointerMoved);
}
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
RootBorder = GetTemplateChild("RootBorder") as Border;
ItemsGrid = GetTemplateChild("ItemsGrid") as Grid;
ScrollViewer = GetTemplateChild("ScrollViewer") as ScrollViewer;
ScrollViewer.AddHandler(UIElement.PointerPressedEvent, PointerPressedHandler, true);
ScrollViewer.AddHandler(UIElement.PointerReleasedEvent, PointerReleasedHandler, true);
ScrollViewer.AddHandler(UIElement.PointerCanceledEvent, PointerReleasedHandler, true);
ScrollViewer.AddHandler(UIElement.PointerExitedEvent, PointerReleasedHandler, true);
ScrollViewer.ViewChanging += _ScrollViewer_ViewChanging;
}
然後我們需要把每個子元素在Panel中的位置緩存下來，在Panel中添加屬性
private Dictionary<UIElement, Rect> _ChildrenRects;
public Dictionary<UIElement, Rect> ChildrenRects
{
get
{
if (_ChildrenRects == null) _ChildrenRects = new Dictionary<UIElement, Rect>();
return _ChildrenRects;
}
set => _ChildrenRects = value;
}
將ArrangeOverride中Children[x].Arrange(new Rect...)修改為如下
var rect = new Rect(x, y, Children[i].DesiredSize.Width, Children[i].DesiredSize.Height); Children[i].Arrange(rect); ChildrenRects[Children[i]] = rect;
編寫以下幾個輔助的方法：
//從Item獲取在Panel中的布局信息
private Rect? GetItemRect(object Item)
{
var itemContainer = base.ContainerFromItem(Item) as UIElement;
if (itemContainer != null && _Panel != null)
{
if (_Panel.ChildrenRects.ContainsKey(itemContainer))
{
return _Panel.ChildrenRects[itemContainer];
}
}
return null;
}
//從容器獲取Item和Index
private int GetIndexFromContainer(UIElement Container, out object Item, IList<object> SourceList = null)
{
Item = ItemFromContainer(Container);
if (Item != null)
{
if (SourceList == null) SourceList = GetSourceList();
return SourceList.IndexOf(Item);
}
return -1;
}
//獲取坐標位置的Item和Index
private int GetIndexFromPosition(Point Position, out object Item)
{
var sourceList = GetSourceList();
for (int i = 0; i < sourceList.Count; i++)
{
var rect = GetItemRect(sourceList[i]);
if (!rect.HasValue) break;
if (rect.Value.Contains(Position))
{
Item = sourceList[i];
return i;
}
}
Item = null;
return -1;
}
//獲取源列表
private IList<object> GetSourceList()
{
if (ItemsSource == null) return Items.ToList();
else
{
var tmp = new List<object>();
foreach (var item in (IEnumerable)ItemsSource)
{
tmp.Add(item);
}
return tmp;
}
}
然後編寫三個狀態方法：OnSelectionStart初始化各個變量的狀態，獲取開始的點；OnSelecting更新被選中的項，OnSelectionComplate做最後的清理，還原狀態：
int StartIndex = -1; //本次選擇開始的位置
int EndIndex = -1; //本次選擇結束的位置
bool? IsFirstItemHadSelected; //本次選擇是選中後續還是取消選中後續
Point? StartPoint; //選中開始的坐標
UIElement StartContainer; //選擇開始時的容器
private void OnSelectionStarted(Point Position)
{
var tmpIndex = GetIndexFromPosition(Position, out var item);
if (tmpIndex == -1)
{
return;
}
if (StartIndex < 0)
{
StartIndex = tmpIndex;
IsFirstItemHadSelected = SelectedItems.Contains(item);
StartContainer = ContainerFromItem(item) as UIElement;
}
}
private void OnSelecting(UIElement Container)
{
if (IsFirstItemHadSelected.HasValue)
{
var sourceList = GetSourceList();
var tmpIndex = GetIndexFromContainer(Container, out var item, sourceList);
if (tmpIndex == -1) return;
if (StartIndex < 0)
{
StartIndex = tmpIndex;
return;
}
else
{
EndIndex = tmpIndex;
if (EndIndex >= 0)
{
for (int i = Math.Min(StartIndex, EndIndex); i <= Math.Max(StartIndex, EndIndex); i++)
{
if (IsFirstItemHadSelected.Value)
{
if (SelectedItems.Contains(sourceList[i])) SelectedItems.Remove(sourceList[i]);
}
else
{
if (!SelectedItems.Contains(sourceList[i])) SelectedItems.Add(sourceList[i]);
}
}
}
}
}
}
private void OnSelectionComplated()
{
StartIndex = -1;
EndIndex = -1;
IsFirstItemHadSelected = null;
StartPoint = null;
StartContainer = null;
}
然後編寫事件：
private void Container_PointerEntered(object sender, PointerRoutedEventArgs e)
{
if (IsFirstItemHadSelected.HasValue)
{
if (sender is UIElement ele && ele != StartContainer)
{
if (StartContainer == null)
{
StartContainer = ele;
StartIndex = GetIndexFromContainer(StartContainer, out var item);
}
else
{
OnSelecting(ele);
}
}
}
}
private void _PointerPressed(object sender, PointerRoutedEventArgs e)
{
StartPoint = e.GetCurrentPoint(ItemsGrid).Position;
OnSelectionStarted(StartPoint.Value);
IsSwipeEnable = true;
}
private void _PointerReleased(object sender, PointerRoutedEventArgs e)
{
if (IsSwipeEnable.HasValue)
{
OnSelectionComplated();
}
}
至此，BigbangView已經可以響應鼠標的滑動選擇。
下回預告：BigbangView響應觸摸。
UWP中實現大爆炸效果（二）