MyFessttoWord P9 ----UserControl and Side menu Content
一,建立新的插头页.
1,新建一个chat页.(Copy from LoginPage)
<local:BasePage x:Class="Fasetto.Word.ChatPage" x:TypeArguments="local:LoginViewModel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:Fasetto.Word" mc:Ignorable="d" d:DesignHeight="700" d:DesignWidth="700" Title="ChatPage" x:Name="chatPage"> <Border > </Border> </local:BasePage>
2,更改ChatPage类
public partial class ChatPage : BasePage<LoginViewModel> { public ChatPage() { InitializeComponent(); } }
3,选择登录的页为ChatPage类
public ApplicationPage CurrentPage { get; set; } = ApplicationPage.Chat;
4,更改选择器
public class ApplicationPageValueConverter : BaseValueConverter<ApplicationPageValueConverter> { public override object Convert(object value, Type targetType, object parameter, CultureInfo culture) { switch((ApplicationPage)value) { case ApplicationPage.Login: return new LogoPage(); //Add ChatPage case ApplicationPage.Chat: return new ChatPage(); default: //Debugger.Break(); return null; } } public override object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }
6 更改MainWindow的最大尺寸和最小尺寸.
5,此时,显示CHat的空界面
6,进行Main Window的Xaml改造
<Border Background="{StaticResource WordBlueBrush}"> <Grid> <Grid.Background> <ImageBrush ImageSource="/Images/Background/emoji-background.png" TileMode="Tile" Viewport="0 0 500 500" ViewportUnits="Absolute"/> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="300" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <!--the chat page--> <Frame Grid.Column="1" x:Name="MainFrame" Content="{Binding CurrentPage,Converter={local:ApplicationPageValueConverter}}" /> <!--SideMenuControl--> <local:SidemenuControl > <Button Content="Test"/> </local:SidemenuControl> </Grid> </Border>
- 将页面分割成两个部分,1个部分宽度为300,一个享受剩下的空间.
- Frame的空间是右边的,左边300留给今天的内容.
二,创建SideMenuControl---UseControl
<UserControl x:Class="Fasetto.Word.SidemenuControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:Fasetto.Word" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <UserControl.Template> <ControlTemplate TargetType="UserControl"> <!--the Meum --> <Border Background="{StaticResource BackgroundVeryLightBrush}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <!--the top menu--> <Grid Background="{StaticResource WordBlueBrush}" Height="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <!--Left icons of 3--> <StackPanel Orientation="Horizontal" Grid.Column="0"> <Button Style="{StaticResource IconButton}" Content="{StaticResource FontAwesomeChatIcon}"/> <Button Style="{StaticResource IconButton}" Content="{StaticResource FontAwesomeUserIcon}"/> <Button Style="{StaticResource IconButton}" Content="{StaticResource FontAwesomePictureIcon}"/> </StackPanel> <StackPanel Orientation="Horizontal" Grid.Column="2"> <Button Foreground="{StaticResource WordDarkBlueBrush}" Style="{StaticResource IconButton}" Content="{StaticResource FontAwesomeCogIcon}"/> </StackPanel> </Grid> <ContentPresenter Grid.Row="1" /> </Grid> </Border> </ControlTemplate> </UserControl.Template> </UserControl>
1,将空间分割为上下两部分,上面部分高50.
2,将最上面部分分割成3部分.第一和第三部分用来放IconButton,第二部分留白.
3,新建IconButtonStyle
<Style x:Key="IconButton" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}"> <Setter Property="Background" Value="{StaticResource WordBlueBrush}" /> <Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="FontSize" Value="{StaticResource FontSizeXXLarge}" /> <Setter Property="FontFamily" Value="{StaticResource FontAwesome}" /> <Setter Property="Padding" Value="20" /> <Setter Property="Margin" Value="0" /> <Setter Property="Width" Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ButtonBase}"> <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <Grid> <!--use view box avoid not show total icon--> <Viewbox> <TextBlock Text="{TemplateBinding Content}" Focusable="False" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </Viewbox> </Grid> </Border> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ColorAnimation To="{StaticResource WordLightBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard> <ColorAnimation From="{StaticResource WordLightBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" /> </Storyboard> </BeginStoryboard> </EventTrigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" TargetName="border" Value="{StaticResource ForegroundDarkBrush}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
- 设置FontFamily为FontAwesome,并且在资源中添加该Font
- 设置宽度=高度
- <Setter Property="Width" Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" />
- 设置颜色WordBlue,在鼠标上去时变成WordLightBlue.
- 对于TextBlock,包围ViewBox,以使文字自动缩小.
4,新建String资源---4个图标
<system:String x:Key="FontAwesomeChatIcon"></system:String>
<system:String x:Key="FontAwesomeUserIcon"></system:String>
<system:String x:Key="FontAwesomePictureIcon"></system:String>
<system:String x:Key="FontAwesomeCogIcon"></system:String>
5,建立今天的图标