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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/frogkiller/p/14447655.html