码迷,mamicode.com
首页 > 其他好文 > 详细

MyFesttoWord P10 ChatList and ChatListItem

时间:2021-03-01 13:44:10      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:函数   spl   express   mst   openxml   prope   nta   ram   public   

1,新建一个USer Control------ChatListItemControl

<UserControl x:Class="Fasetto.Word.ChatListItemControl"
             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:DesignWidth="300">
    <UserControl.Resources>
        <Style x:Key="ContainterStyle" TargetType="{x:Type ContentControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border x:Name="background" Background="{StaticResource ForegroundLightBrush}">
                            <Grid  x:Name="container"  Background="Transparent">
                                <Grid.ColumnDefinitions>

                                    <!--Profile pictrue-->
                                    <ColumnDefinition Width="Auto" />
                                    <!--Main content-->
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <!--New Message Indicate Bar-->
                                <Border  Background="Red"
                                         Width="4"
                                         HorizontalAlignment="Left"
                                         Visibility="{Binding NewContentAvailable,Converter={local:BooleanToVisibilityConverter},ConverterParameter=True}"
                                         />

                                <!--Profile pictrue-->
                                <Border Grid.Column="0" Padding="8 15" >
                                    <Border Background="{Binding ProfilePictureRGB, Converter={local:StringToSolidBrushConverter}}"
                                           Height="40"
                                            Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
                                            CornerRadius="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
                                        >
                                        <TextBlock Text="{Binding Initials}"
                                            Foreground="{StaticResource ForegroundLightBrush}"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center"
                                            FontFamily="{StaticResource LatoRegular}"
                                            FontSize="{StaticResource FontSizeLarge}"
                           />
                                    </Border>

                                </Border>

                                <Border Grid.Column="2" Padding="0 0 8 0">
                                    <StackPanel VerticalAlignment="Center">

                                        <!--Name-->
                                        <TextBlock FontFamily="{StaticResource LatoRegular}"
                                           Text="{Binding  Name}"
                                           Foreground="{StaticResource WordBlueBrush}"
                                           TextTrimming="CharacterEllipsis"
                                           Padding="0 0 0 2"
                                               />

                                        <!--Message-->
                                        <TextBlock FontFamily="{StaticResource LatoRegular}"
                                           Text="{Binding Message}"
                                           Foreground="{StaticResource ForegroundDarkBrush}"
                                           TextTrimming="CharacterEllipsis"
                                           Padding="0 2 0 0"/>
                                    </StackPanel>
                                </Border>
                            </Grid>

                        </Border>
                      <!--Trigger-->
                        <ControlTemplate.Triggers>
                            <!--Data Trigger-->
                            <DataTrigger Binding="{Binding IsSelect}" Value="True">
                                <Setter Property="Background" TargetName="background"  Value="{StaticResource WordVeryVeryLightBlueBrush}" />
                            </DataTrigger>
                            <!--Event Trigger-->
                            <EventTrigger RoutedEvent="MouseEnter">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation To="{StaticResource WordVeryVeryLightBlue}" Duration="0:0:0.3" Storyboard.TargetName="container" Storyboard.TargetProperty="Background.Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation  Duration="0:0:0.3" Storyboard.TargetName="container" Storyboard.TargetProperty="Background.Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <ContentControl d:DataContext="{x:Static local:ChatListItemDesignModel.Instance}" Style="{StaticResource ContainterStyle}"/>
</UserControl>
  • 建立一个ContentControl,并使用Style.并将其使用d:DataContext设定设计时的绑定内容.

技术图片,

  • 设定事件MouseEnter 和 MouseLeave
  • 设定Border--的背景色.这种利用外包Border的方式进行颜色的更改的方式值得学习.
  • 设定string 转 SolidColorBrush 的函数
  • public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {

               return (SolidColorBrush)(new BrushConverter()).ConvertFromString($"#{value}");
        }

2,新建对应的数据类型ChatListItemViewModel

public class ChatListItemViewModel : BaseViewModel
    {
        /// <summary>
        /// the display name of the chat list
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// the Message from this chat
        /// </summary>
        public string Message { get; set; }

        /// <summary>
        /// the intials to show from the circle.
        /// </summary>
        public string Initials { get; set; }

        /// <summary>
        /// the rgb values for the background circle
        /// </summary>
        public string ProfilePictureRGB { get; set; }

        /// <summary>
        /// Indicate if there is new message is on.
        /// </summary>
        public bool NewContentAvailable { get; set; }
        public bool IsSelected { get; set; }



    }

3,新建ChatLilstControl控件

<UserControl x:Class="Fasetto.Word.ChatListControl"
             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">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <Grid DataContext="{x:Static local:ChatListDesignModel.Instance}" Background="{StaticResource ForegroundLightBrush}">
            <ItemsControl ItemsSource="{Binding Items}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <local:ChatListItemControl/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </ScrollViewer>

</UserControl>
  • 设定SocrollViewer,以支持显示滚动条
  • 设定父容器的DataContext,以使其支持类


4,新建ChatListViewModel

 public class ChatListViewModel:BaseViewModel
    {
      public List<ChatListItemViewModel> Items { get; set; }
    }

5,新建ChatListItemDesignModel-用于调试用户控件.带d的数据类型只在设计时显示

 class ChatListItemDesignModel:ChatListItemViewModel
    {
        #region Singleton

        /// <summary>
        /// 
        /// </summary>
        public static ChatListItemDesignModel Instance => new ChatListItemDesignModel();
        #endregion

        #region Constructor

        public ChatListItemDesignModel()
        {
            Initials = "BC";
            Message = "it‘s a very funny gamepppppppppppppppppppppppppppppppppppppp";
            Name = "abcd";
            ProfilePictureRGB = "2011f3";
            NewContentAvailable = false;
        }
        #endregion



    }

6,新建CHatListDesignModel

public class ChatListDesignModel : ChatListViewModel
    {
        #region Singleton

        /// <summary>
        /// 
        /// </summary>
        public static ChatListDesignModel Instance => new ChatListDesignModel();
        #endregion

        #region Constructor

        public ChatListDesignModel()
        {
            Items = new List<ChatListItemViewModel>
            {
                 new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "40995c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                 new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "30192c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                   new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "40995c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                 new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "30192c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                   new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "40995c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                 new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "30192c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                   new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "40995c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                 new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "30192c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                   new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "40995c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },
                 new ChatListItemViewModel
                    {
                        Initials = "AA",
                        Message = "it‘s a very funny gaddddddme",
                        Name = "bb",
                        ProfilePictureRGB = "30192c",
                        IsSelected=true,
                        NewContentAvailable=true,

                    },

            };


技术图片

MyFesttoWord P10 ChatList and ChatListItem

标签:函数   spl   express   mst   openxml   prope   nta   ram   public   

原文地址:https://www.cnblogs.com/frogkiller/p/14458827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!