Maison >développement back-end >Tutoriel C#.Net >Windows 10 - Introduction détaillée aux contrôles (classes de collection)
Windows 10 - Introduction détaillée aux contrôles (classes de collection)
- 零下一度original
- 2017-06-26 15:40:032250parcourir
Exemple
1. Personnaliser ItemsControl (personnaliser GirdView pour que chaque élément occupe une taille d'espace différente)
Controls/CollectionControl/ItemsControlDemo/MyItemsControlDemo.xaml
<Pagex:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.MyItemsControlDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.CollectionControl.ItemsControlDemo"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Page.Resources><DataTemplate x:Key="ItemTemplate"><Grid Background="{Binding ColorValue}"><Grid Background="Black" VerticalAlignment="Top" Opacity="0.7"><TextBlock Text="{Binding ColorName}" /></Grid></Grid></DataTemplate><Style x:Key="ItemContainerStyle" TargetType="GridViewItem"><Setter Property="VerticalContentAlignment" Value="Stretch" /><Setter Property="HorizontalContentAlignment" Value="Stretch" /><Setter Property="Margin" Value="0" /><Setter Property="Padding" Value="0" /></Style><ItemsPanelTemplate x:Key="ItemsPanel"><VariableSizedWrapGrid MaximumRowsOrColumns="8" Orientation="Horizontal" ItemWidth="100" ItemHeight="100" /></ItemsPanelTemplate></Page.Resources><Grid Background="Transparent" Margin="10 0 10 10"><!--使用 MyGridView 控件，其重写了 GridView 的 PrepareContainerForItemOverride() 方法，详见 MyGridView.cs--><local:MyGridView x:Name="gridView" Width="812" VerticalAlignment="Top" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate}" ItemContainerStyle="{StaticResource ItemContainerStyle}" ItemsPanel="{StaticResource ItemsPanel}"
IsItemClickEnabled="False"
SelectionMode="None"></local:MyGridView></Grid></Page> Controls/CollectionControl/ItemsControlDemo/MyItemsControlDemo.xaml.cs
/*
* ItemsControl - 集合控件（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）
* protected virtual void PrepareContainerForItemOverride(DependencyObject element, object item); - 为 item 准备 container 时
* element - item 的 container
* item - item
*
*
* 本例用于演示如何使 GirdView 中的每个 item 占用不同大小的空间
* 1、布局控件要使用 VariableSizedWrapGrid（利用其 RowSpan 和 ColumnSpan 来实现 item 占用不同大小的空间），需要注意的是其并非是虚拟化布局控件
* 2、自定义 GridView，并重写 ItemsControl 的 protected override void PrepareContainerForItemOverride(DependencyObject element, object item) 方法
* 然后设置每个 item 的 VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan */using System;using System.Collections.Generic;using System.Linq;using Windows.UI;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Media;using System.Reflection;namespace Windows10.Controls.CollectionControl.ItemsControlDemo
{public sealed partial class MyItemsControlDemo : Page
{public MyItemsControlDemo()
{this.InitializeComponent();
BindData();
}private void BindData()
{
Random random = new Random();// 获取 Windows.UI.Colors 的全部数据Type type = typeof(Colors);
List<ColorModel> colors = type.GetRuntimeProperties() // GetRuntimeProperties() 在 System.Reflection 命名空间下.Select(c => new ColorModel
{
ColorName = c.Name,
ColorValue = new SolidColorBrush((Color)c.GetValue(null)),
ColSpan = random.Next(1, 3), // 此对象所占网格的列合并数RowSpan = random.Next(1, 3) // 此对象所占网格的行合并数 })
.ToList();// 绑定数据gridView.ItemsSource = colors;
}
}/// <summary>/// 用于数据绑定的对象/// </summary>public class ColorModel
{public string ColorName { get; set; }public SolidColorBrush ColorValue { get; set; }// 此对象所占的网格的列合并数public int ColSpan { get; set; }// 此对象所占的网格的行合并数public int RowSpan { get; set; }
}/// <summary>/// 自定义 GridView，重写 ItemsControl 的 protected override void PrepareContainerForItemOverride(DependencyObject element, object item) 方法/// 用于指定 GridView 的每个 item 所占网格的列合并数和行合并数/// </summary>public class MyGridView : GridView
{protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{try{// 设置每个 item 的 VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan, 从而实现每个 item 占用不同大小的空间// 仅为演示用，由于这里的 ColSpan 和 RowSpan 都是随机计算的，所以可能会出现空白空间dynamic dynamicItem = item;
element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, dynamicItem.ColSpan);
element.SetValue(VariableSizedWrapGrid.RowSpanProperty, dynamicItem.RowSpan);
}catch (Exception ex)
{var ignore = ex;// 当有异常情况发生时（比如：item 没有 ColSpan 属性或 RowSpan 属性）element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
}finally{base.PrepareContainerForItemOverride(element, item);
}
}
}
}
2. Personnalisez ContentPresenter pour obtenir des effets similaires à GridViewItemPresenter et ListViewItemPresenter
. Controls/CollectionControl/ItemsControlDemo/MyItemPresenter.cs
/*
* 自定义 ContentPresenter 实现类似 GridViewItemPresenter 和 ListViewItemPresenter 的效果 */using System;using Windows.Foundation;using Windows.UI;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Media;using Windows.UI.Xaml.Media.Animation;using Windows.UI.Xaml.Shapes;namespace Windows10.Controls.CollectionControl.ItemsControlDemo
{class MyItemPresenter : ContentPresenter
{
Panel _container = null; // item 的容器（即在 DataTemplate 中定义的根元素，在示例 MyItemPresenterDemo.xaml 中用的是 Grid）Rectangle _pointerOverBorder = null; // 鼠标经过 item 时覆盖在 item 上的 rectangleRectangle _focusVisual = null; // 选中 item 时覆盖在 item 上的 rectangleStoryboard _pointerDownStoryboard = null; // 鼠标按下时的动画Storyboard _pointerUpStoryboard = null; // 鼠标抬起时的动画public MyItemPresenter()
: base()
{base.Margin = new Thickness(10);
}// override OnApplyTemplate() - 应用控件模板时调用protected override void OnApplyTemplate()
{base.OnApplyTemplate();
_container = (Panel)VisualTreeHelper.GetChild(this, 0);
}// override GoToElementStateCore() - VisualState 转换时调用（此方法仅在自定义 ContentPresenter 并将其应用于 GridView 或 ListView 的 ItemContainerStyle 时才会被调用）// stateName - VisualState 的名字// useTransitions - 是否使用 VisualTransition 过渡效果protected override bool GoToElementStateCore(string stateName, bool useTransitions)
{base.GoToElementStateCore(stateName, useTransitions);switch (stateName)
{// 正常状态case "Normal":
HidePointerOverVisuals();
HideFocusVisuals();if (useTransitions)
{
StopPointerDownAnimation();
}break;// 选中状态case "Selected":case "PointerFocused":
ShowFocusVisuals();if (useTransitions)
{
StopPointerDownAnimation();
}break;// 取消选中状态case "Unfocused":
HideFocusVisuals();break;// 鼠标经过状态case "PointerOver":
ShowPointerOverVisuals();if (useTransitions)
{
StopPointerDownAnimation();
}break;// 鼠标点击状态case "Pressed":case "PressedSelected":if (useTransitions)
{
StartPointerDownAnimation();
}break;default: break;
}return true;
}private void StartPointerDownAnimation()
{if (_pointerDownStoryboard == null)
CreatePointerDownStoryboard();
_pointerDownStoryboard.Begin();
}private void StopPointerDownAnimation()
{if (_pointerUpStoryboard == null)
CreatePointerUpStoryboard();
_pointerUpStoryboard.Begin();
}private void ShowFocusVisuals()
{if (!FocusElementsAreCreated())
CreateFocusElements();
_focusVisual.Opacity = 1;
}private void HideFocusVisuals()
{if (FocusElementsAreCreated())
_focusVisual.Opacity = 0;
}private void ShowPointerOverVisuals()
{if (!PointerOverElementsAreCreated())
CreatePointerOverElements();
_pointerOverBorder.Opacity = 1;
}private void HidePointerOverVisuals()
{if (PointerOverElementsAreCreated())
_pointerOverBorder.Opacity = 0;
}private void CreatePointerDownStoryboard()
{/* * 用这种方式为 item 实现鼠标按下的效果会报错（Attempted to read or write protected memory. This is often an indication that other memory is corrupt.），不知道为什么
* PointerDownThemeAnimation pointerDownAnimation = new PointerDownThemeAnimation();
* Storyboard.SetTarget(pointerDownAnimation, _container);
* Storyboard pointerDownStoryboard = new Storyboard();
* pointerDownStoryboard.Children.Add(pointerDownAnimation); */DoubleAnimation da1 = new DoubleAnimation()
{
To = 0.9,
Duration = TimeSpan.FromMilliseconds(100)
};
DoubleAnimation da2 = new DoubleAnimation()
{
To = 0.9,
Duration = TimeSpan.FromMilliseconds(100)
};
Storyboard.SetTarget(da1, _container);
Storyboard.SetTargetProperty(da1, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)");
Storyboard.SetTarget(da2, _container);
Storyboard.SetTargetProperty(da2, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)");if (!(_container.RenderTransform is TransformGroup))
{
TransformGroup Group = new TransformGroup();
Group.Children.Add(new ScaleTransform());
_container.RenderTransform = Group;
_container.RenderTransformOrigin = new Point(0.5, 0.5);
}
_pointerDownStoryboard = new Storyboard();
_pointerDownStoryboard.Children.Add(da1);
_pointerDownStoryboard.Children.Add(da2);
_pointerDownStoryboard.Begin();
}private void CreatePointerUpStoryboard()
{
DoubleAnimation da1 = new DoubleAnimation()
{
To = 1,
Duration = TimeSpan.FromMilliseconds(100)
};
DoubleAnimation da2 = new DoubleAnimation()
{
To = 1,
Duration = TimeSpan.FromMilliseconds(100)
};
Storyboard.SetTarget(da1, _container);
Storyboard.SetTargetProperty(da1, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)");
Storyboard.SetTarget(da2, _container);
Storyboard.SetTargetProperty(da2, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)");if (!(_container.RenderTransform is TransformGroup))
{
TransformGroup Group = new TransformGroup();
Group.Children.Add(new ScaleTransform());
_container.RenderTransform = Group;
_container.RenderTransformOrigin = new Point(0.5, 0.5);
}
_pointerUpStoryboard = new Storyboard();
_pointerUpStoryboard.Children.Add(da1);
_pointerUpStoryboard.Children.Add(da2);
_pointerUpStoryboard.Begin();
}private void CreatePointerOverElements()
{
_pointerOverBorder = new Rectangle();
_pointerOverBorder.IsHitTestVisible = false;
_pointerOverBorder.Opacity = 0;// 这里把颜色写死了，仅为演示用，实际写的时候要摘出来写成依赖属性_pointerOverBorder.Fill = new SolidColorBrush(Color.FromArgb(0x50, 0x50, 0x50, 0x50));
_container.Children.Insert(_container.Children.Count, _pointerOverBorder);
}private void CreateFocusElements()
{
_focusVisual = new Rectangle();
_focusVisual.IsHitTestVisible = false;
_focusVisual.Height = 10;
_focusVisual.VerticalAlignment = VerticalAlignment.Bottom;// 这里把颜色写死了，仅为演示用，实际写的时候要摘出来写成依赖属性_focusVisual.Fill = new SolidColorBrush(Color.FromArgb(0xff, 0xff, 0x0, 0x0));
_container.Children.Insert(0, _focusVisual);
}private bool FocusElementsAreCreated()
{return _focusVisual != null;
}private bool PointerOverElementsAreCreated()
{return _pointerOverBorder != null;
}
}
}Controls/CollectionControl/ItemsControlDemo/MyItemPresenterDemo.xaml
<Pagex:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.MyItemPresenterDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.CollectionControl.ItemsControlDemo"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Page.Resources><Style x:Key="MyGridViewItemPresenterTemplate" TargetType="GridViewItem"><Setter Property="Background" Value="Transparent"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="GridViewItem"><!--自定义 ContentPresenter 实现类似 GridViewItemPresenter 和 ListViewItemPresenter 的效果--><local:MyItemPresenter /></ControlTemplate></Setter.Value></Setter></Style></Page.Resources><Grid Background="Transparent"><GridView x:Name="gridView" SelectionMode="Single" Margin="10 0 10 10"
ItemContainerStyle="{StaticResource MyGridViewItemPresenterTemplate}"><GridView.ItemTemplate><DataTemplate><Grid Height="100" Width="100" Background="Blue"><TextBlock x:Name="lblName" Text="{Binding Name}" Foreground="Yellow" /></Grid></DataTemplate></GridView.ItemTemplate></GridView></Grid></Page>Controls / CollectionControl/ItemsControlDemo/MyItemPresenterDemo.xaml.cs
/*
* 本例用于演示如何自定义 ContentPresenter 实现类似 GridViewItemPresenter 和 ListViewItemPresenter 的效果 */using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Navigation;using Windows10.Common;namespace Windows10.Controls.CollectionControl.ItemsControlDemo
{public sealed partial class MyItemPresenterDemo : Page
{public MyItemPresenterDemo()
{this.InitializeComponent();
}protected override void OnNavigatedTo(NavigationEventArgs e)
{
gridView.ItemsSource = TestData.GetEmployees();
}
}
}
OK
[Téléchargement du code source]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utiliser un programme WPF pour lancer un programme UWPArticle suivant：Utiliser un programme WPF pour lancer un programme UWP