您的位置：首页 > 移动开发

Windows Store App Development Tip and Tricks - GridViewItem

2012-11-07 16:59 537 查看

This post talks about

* How to add ItemContainerStyleSelector to GridView

* How to remove GridViewItem selection and click animation

ItemContainerStyleSelector on MSDN:

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemscontrol.itemcontainerstyleselector(v=win.10).aspx

Add GridViewItem styles

1. In Visual Studio 2012, create a blank Windows Store App project.

2. Open MainPage.xaml in design mode. Add a GridView.

<GridView
SelectionMode="None"
VerticalAlignment="Center"
HorizontalAlignment="Center">

<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>

<GridViewItem Width="300" Height="300" Margin="10" Background="Gray" FontSize="50">red</GridViewItem>
<GridViewItem Width="300" Height="300" Margin="10" Background="Gray" FontSize="50">green</GridViewItem>

</GridView>

3. Run application, you can see both items in gray color.

Implement ItemContainerStyleSelector

1. Firstly we create a custom style for GridViewItem to set the items background color as Red.

2. In design mode, select GridViewItem with “red” text. Right click on it, choose “Edit Template”->”Edit a copy…”. In “Create Style Resource” dialog, fill the name (key) as “GridViewItemRedStyle”, choose “Define in” as “This document”. In MainPage.xaml, a new style “GridViewItemRedStyle” is added in Page.Resources section. We update the value of property “Background” from “Transparent” to “Red”.

<Page.Resources>
<Style x:Key="GridViewItemRedStyle" TargetType="GridViewItem">
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Red"/>
…………

3. Create a new style with name “GridViewItemGreenStyle” similar with the step 2. Set the value of property “Background” as “Green”. Remove background settings from GridViewItems, the xaml looks lik

<GridViewItem Width="300" Height="300" Margin="10" FontSize="50" Style="{StaticResource GridViewItemRedStyle}">red</GridViewItem>

<GridViewItem Width="300" Height="300" Margin="10" FontSize="50" Style="{StaticResource GridViewItemGreenStyle}">green</GridViewItem>

4. Run application. You can see the items in red and green.

5. Add new class named “MainItemContainerStyleSelector.cs” into project. Copy the below code to the class. You also need to add references.

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

public class MainItemContainerStyleSelector : StyleSelector
{
public Style RedStyle { get; set; }

public Style GreenStyle { get; set; }

protected override Style SelectStyleCore(object item, DependencyObject container)
{
string content = ((GridViewItem)item).Content.ToString();

switch(content)
{
case "red":
return RedStyle;
break;
case "green":
return GreenStyle;
break;
}

return ((GridViewItem)item).Style;
}
}

6. In MainPage.xaml, add MainItemContainerStyleSelector as StaticResource.

<local:MainItemContainerStyleSelector x:Key="mainItemContainerStyleSelector" RedStyle="{StaticResource GridViewItemStyle1}" GreenStyle="{StaticResource GridViewItemStyle2}"/>

7. Update the GridView as below.

<GridView
SelectionMode="None"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ItemContainerStyleSelector="{StaticResource mainItemContainerStyleSelector}">

<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>

<GridViewItem Width="300" Height="300" Margin="10" FontSize="50">red</GridViewItem>
<GridViewItem Width="300" Height="300" Margin="10" FontSize="50">green</GridViewItem>

</GridView>

8. Launch the application.

Remove selection and click animations from GridViewItem style

1. Sometimes we only want user to view the content of item, but cannot action it. In order to do this, we can update GridViewItem’s style to remove selection and click animations. saying the Red GridViewItem we created in the above steps. In “GridViewItemRedStyle”, find the visualState “PointerOver” and “PointerOverPressed”. Remove storyboard from them.

2. Rebuild and launch the application, move the pointer to red item and click on it. Comparing to the green item, the animations are removed from the red item now.

Source Code: http://files.cnblogs.com/Tealcwu/ItemContainerStyleSelectorDemo.zip

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航