标签：
相信大家都很喜欢win8的菜单效果，但是自己做，实在比较困难。
DevExpress for WPF 中有个控件 TileLayoutControl
感觉不错，先上效果图：
说说该菜单的常用属性：
Header: 中文提示
Size:大小,一共4种:ExtraSmall，ExtraLarge，Small，Large
dxlc:TileLayoutControl.GroupHeader:所属分组中文名称
dxlc:TileLayoutControl.IsFlowBreak：是否进入新的分组
dxwuin:Navigation.NavigateTo:跳转界面名称,备注：这个位置不是常规路径，而是你要跳转的菜单的名称不要有xaml
dxwuin:Navigation.NavigationParameter:跳转参数。这个需要子菜单实现接口 INavigationAware一共有3个方法
#region 窗体跳转接口
public void NavigatedFrom(NavigationEventArgs e)
{
}
public void NavigatedTo(NavigationEventArgs e)
{
//你所传的参数
e.Parameter
}
public void NavigatingFrom(NavigatingEventArgs e)
{
}
#endregion
TileClick：LayoutControl点击事件
使用这个控件需要引用：xmlns:dxlc="clr-namespace:DevExpress.Xpf.LayoutControl;assembly=DevExpress.Xpf.LayoutControl.v13.2"
如果要实现title不停得切换效果：需要引用：xmlns:dx="clr-namespace:DevExpress.Xpf.Core;assembly=DevExpress.Xpf.Core.v13.2"
ContentChangeInterval：切换时间：格式为：00:00:03.00
具体代码：
<dxlc:TileLayoutControl Margin="0" Padding="0"> <dxlc:Tile Size="ExtraSmall" Background="#FF00ABDC" Header="用户"> <Image Source="/WpfApplication1;component/Images/UserManagment.png" Stretch="None" /> </dxlc:Tile> <dxlc:Tile Size="ExtraLarge" Background="#FF00ABDC" Header="设置"> <Image Source="/WpfApplication1;component/Images/System.png" Stretch="None" /> </dxlc:Tile> <dxlc:Tile Size="Small" Background="#FF6652A2" Header="查询" > <Image Source="/WpfApplication1;component/Images/Research.png" Stretch="None" /> </dxlc:Tile> <dxlc:Tile Size="Large" Background="#FF7CA7D1" Header="数据" dxlc:FlowLayoutControl.IsFlowBreak="True"> <Image Source="/WpfApplication1;component/Images/Statistics.png" Stretch="None" /> </dxlc:Tile> <dxlc:Tile Background="#FF7CA7D1" Header="网站" ContentChangeInterval="00:00:03.00"> <dxlc:Tile.ContentSource> <dx:FrameworkElements> <Image Margin="12" Source="/WpfApplication1;component/Images/ZillowLogo.png" Stretch="None" /> <TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"> Your <Bold>Edge</Bold> in <Bold>Real Estate</Bold> </TextBlock> </dx:FrameworkElements> </dxlc:Tile.ContentSource> </dxlc:Tile> </dxlc:TileLayoutControl>
一般而言，吧这个控件当做菜单，是需要封装的，这样使用这个控件才有意义，才具有可控性。下面把封装的代码给大家看看：
<dxlc:TileLayoutControl Name="lmc" Padding="30,50,30,10"> <dxlc:TileLayoutControl.Resources> <Style TargetType="dxlc:Tile"> <Setter Property="Size" Value="{Binding SubSize}" /> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <Grid Background="{Binding BackgroudColor}"> <Image Source="{Binding ShowImg}" Stretch="None"></Image> <TextBlock Text="{Binding Title}" FontFamily="Segoe UI Light" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </DataTemplate> </Setter.Value> </Setter> <Setter Property="Header" Value="{Binding}" /> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate> <TextBlock Text="{Binding Subtitle}" FontFamily="Segoe UI Light" FontSize="12" /> </DataTemplate> </Setter.Value> </Setter> <Setter Property="dxlc:TileLayoutControl.GroupHeader" Value="{Binding GroupHeader}" /> <Setter Property="dxwuin:Navigation.NavigateTo" Value="{Binding ChildUrl}" /> <Setter Property="dxwuin:Navigation.NavigationParameter" Value="{Binding ToEntity}" /> <Setter Property="dxlc:TileLayoutControl.IsFlowBreak" Value="{Binding IsFlowBreak}" /> </Style> <Style TargetType="dxlc:TileGroupHeader"> <Setter Property="Foreground" Value="#FF000000" /> </Style> </dxlc:TileLayoutControl.Resources> </dxlc:TileLayoutControl >
对应的实体对象
public class LayoutMenus { public event PropertyChangedEventHandler PropertyChanged; private String _subSize; /// <summary> /// 菜单大小 /// </summary> public String SubSize { get { return _subSize; } set { _subSize = value; SetPropertyChanged("SubSize"); } } private string _backgroudColor; /// <summary> /// 背景颜色 /// </summary> public string BackgroudColor { get { return _backgroudColor; } set { _backgroudColor = value; SetPropertyChanged("BackgroudColor"); } } private string _title; /// <summary> /// 显示标题 备注图片和标题只能任选其一 /// </summary> public string Title { get { return _title; } set { _title = value; SetPropertyChanged("Title"); } } private string showImg; /// <summary> /// 显示图片 备注图片和标题只能任选其一 /// </summary> public string ShowImg { get { return showImg; } set { showImg = value; SetPropertyChanged("ShowImg"); } } private string _subtitle; /// <summary> /// 小标题 /// </summary> public string Subtitle { get { return _subtitle; } set { _subtitle = value; SetPropertyChanged("Subtitle"); } } private string _groupHeader; /// <summary> /// 所属分组 /// </summary> public string GroupHeader { get { return _groupHeader; } set { _groupHeader = value; SetPropertyChanged("GroupHeader"); } } private Boolean _isFlowBreak; /// <summary> /// 是否开始新的分组 /// </summary> public Boolean IsFlowBreak { get { return _isFlowBreak; } set { _isFlowBreak = value; SetPropertyChanged("IsFlowBreak"); } } private string _childUrl; /// <summary> /// 子界面路径 备注:不需要.xaml /// </summary> public string ChildUrl { get { return _childUrl; } set { _childUrl = value; SetPropertyChanged("ChildUrl"); } } private object _toEntity; /// <summary> /// 界面传值对象 /// </summary> public object ToEntity { get { return _toEntity; } set { _toEntity = value; SetPropertyChanged("ToEntity"); } } private void SetPropertyChanged(string name) { if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("SubSize")); } } }
至于后台代码，这个就不必说了，就是给实体赋值，绑定到LayoutControl.ItemsSource上就好了。
好了这个控件基本就到这。
DevExpress for WPF控件之TileLayoutControl
标签：
原文地址：http://www.cnblogs.com/fanmiao/p/4502318.html
