DevExpress for WPF控件之TileLayoutControl

　　相信大家都很喜歡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:00.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上就好了。

好了這個控件基本就到這。Demo源碼