前言

先来看看TIM的聊天记录是怎么样子的

TIM.gif

这里面有几个功能：

1. 点击消息记录按钮，会向右扩展一段距离，显示聊天记录。
2. 缩放的时候，聊天记录部分保持不变，左边的区域缩放。
3. 再次点击消息记录按钮，之前扩展的部分缩回。

初步思路

一开始我的想法是：

1. 使用Grid分列，左边部分的大小是*，右边部分的大小是auto。
2. 点击按钮时显示和隐藏右边部分。
3. 窗体随内容变化则使用SizeToContent去实现。

大概是这样：
xaml部分

<Window x:Class="WpfAsync.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAsync" SizeToContent="WidthAndHeight"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid Background="Red"  MinHeight="450" MinWidth="800">
            <Button HorizontalAlignment="Left" VerticalAlignment="Top" Click="ButtonBase_OnClick">test</Button>
            <Button HorizontalAlignment="Right" VerticalAlignment="Bottom">test1</Button>
        </Grid>
        <Grid Background="AliceBlue" Grid.Column="1" Width="200" Name="target"></Grid>
    </Grid>
</Window>

test1那个按钮是我用来表示左边的边界的，没有实际意义。

C#部分

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
                target.Visibility = target.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible; rate = Width / Height;
        }
     }

来看看效果

第一次尝试

一开始还是好好的，按着预想的，点击之后扩展一部分，再次点击缩回。但是一旦进行了窗体的缩放，就没用了。

那么问题出在哪呢？
答案是SizeToContent上面。你不能够设置了SizeToContent，然后去手动改变窗体的大小！所以一般有个SizeToContent都会跟上ResizeMode="NoResize"
如果你设置窗体，让它自适应内容，窗体会以承载的内容的大小来作为自身的大小。而一旦你手动更改了窗体大小，窗体就不知道，到底是以承载的内容为自身大小，还是按照手动设置的大小来作为自身大小。而WPF中对于这一冲突，统统采用的是，用手动设置的值来作为最后的大小。为什么使用统统，因为这种冲突会出现在很多自动布局的地方，比如说我们例子中使用的

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

这其实也是自动布局，一旦你对Column中放置的元素进行了大小设定。比如Width = 200之类的。Column中的元素就不会自动填充。

继续思考

不能交给window自己去控制大小，就只能手动去控制了呗。XAML部分把SizeToContent=WidthAndHeight去掉，再把C#做一些修改。

    public partial class MainWindow : Window
    {
        private double rate;
        public MainWindow()
        {
            InitializeComponent();
        }


        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            if (target.Visibility == Visibility.Collapsed)
            {
                if(WindowState != WindowState.Maximized) 
                    Width += target.Width;
                target.Visibility = Visibility.Visible;
            }
            else
            {
                if (WindowState != WindowState.Maximized)
                    Width -= target.Width;
                target.Visibility = Visibility.Collapsed;
            }
        }

再来看看效果

第二次尝试

看起来好多了，全屏不好录，不过也是能用的。

额外需求

另外，这里我自己还有一个需求，就是左边部分，缩放必须是等比率的。
解决也很简单，只要让窗体缩放是等比缩放就好了。再来改改C#代码。

    public partial class MainWindow : Window
    {
        private double rate;
        public MainWindow()
        {
            InitializeComponent();
            rate = Width / Height;
            SourceInitialized += Window_SourceInitialized;
        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            if (target.Visibility == Visibility.Collapsed)
            {
                if(WindowState != WindowState.Maximized) 
                    Width += target.Width;
                target.Visibility = Visibility.Visible;
            }
            else
            {
                if (WindowState != WindowState.Maximized)
                    Width -= target.Width;
                target.Visibility = Visibility.Collapsed;
            }
            rate = Width / Height;
        }

        internal enum WM
        {
            WINDOWPOSCHANGING = 0x0046,
        }

        [StructLayout(LayoutKind.Sequential)]
        internal struct WINDOWPOS
        {
            public IntPtr hwnd;
            public IntPtr hwndInsertAfter;
            public int x;
            public int y;
            public int cx;
            public int cy;
            public int flags;
        }

        private void Window_SourceInitialized(object sender, EventArgs ea)
        {
            HwndSource hwndSource = (HwndSource)HwndSource.FromVisual((Window)sender);
            hwndSource.AddHook(DragHook);
        }

        private IntPtr DragHook(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, ref bool handeled)
        {
            switch ((WM)msg)
            {
                case WM.WINDOWPOSCHANGING:
                    {
                        WINDOWPOS pos = (WINDOWPOS)Marshal.PtrToStructure(lParam, typeof(WINDOWPOS));
                        if ((pos.flags & 0x0002) != 0)
                        {
                            return IntPtr.Zero;
                        }

                        Window wnd = (Window)HwndSource.FromHwnd(hwnd).RootVisual;
                        if (wnd == null)
                        {
                            return IntPtr.Zero;
                        }
                        var tx = (int)(pos.cy * rate);
                        var ty = (int)(pos.cx / rate);
                        if (tx < pos.cx)
                            pos.cx = tx;
                        else if (ty < pos.cy)
                            pos.cy = ty;
                        Marshal.StructureToPtr(pos, lParam, true);
                        handeled = true;
                    }
                    break;
            }

            return IntPtr.Zero;
        }
    }

这里使用的是windows本身的消息机制去使得窗体等比更改，比SizeChanged事件中去更改更加的顺滑。但是有一个问题没有解决，就是最大化的时候，竖直方向总是会超出屏幕40的高度。希望有解决办法的朋友能够提出来。