zoukankan      html  css  js  c++  java
  • 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的空界面

    1

    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">&#xf086;</system:String>
        <system:String x:Key="FontAwesomeUserIcon">&#xf007;</system:String>
        <system:String x:Key="FontAwesomePictureIcon">&#xf1c5;</system:String>
        <system:String x:Key="FontAwesomeCogIcon">&#xf013;</system:String>

    5,建立今天的图标

    2

  • 相关阅读:
    web学生选课平台
    YUM仓库的搭建
    定制RPM包
    会话保持
    Nginx负载均衡器+keepalived
    LAMP搭建配置
    KVM安装搭建
    安装PHP以及搭建博客(四)伪静态
    安装PHP以及搭建博客(三)服务迁移分离
    安装PHP以及搭建博客(二)
  • 原文地址:https://www.cnblogs.com/frogkiller/p/14447655.html
Copyright © 2011-2022 走看看