MainWindow.xaml

<Window
    x:Class="SyncRoomChatToolV2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ModelView="clr-namespace:SyncRoomChatToolV2.ModelView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:SyncRoomChatToolV2"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prop="clr-namespace:SyncRoomChatToolV2.Properties"
    xmlns:view="clr-namespace:SyncRoomChatToolV2.UserControls"
    Title="SyncRoom読み上げちゃん V2"
    Width="600"
    Height="450"
    Style="{StaticResource MaterialDesignWindow}"
    Topmost="{Binding WindowTopMost, Source={x:Static prop:Settings.Default}}"
    mc:Ignorable="d">

    <Window.DataContext>
        <ModelView:MainWindowViewModel />
    </Window.DataContext>

    <Window.Background>
        <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlColorKey}}" />
    </Window.Background>

    <Grid>

        <Grid>
            <!--  パクリ元：https://qiita.com/rioLi0N/items/fa068a2db9c602168df1  -->
            <!--  グリッドレイアウト定義  -->
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="2" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!--  GridSplitterを使ってパネルの移動が可能  -->


            <Grid
                x:Name="SplitGrid"
                Grid.Row="0"
                Margin="0,0,0,27"
                Cursor="">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="3" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />


                <!--  上部左側の画面  -->
                <Border Margin="0,31,0,0" Background="White">
                    <!--  上部左側の画面のコンテンツをここに配置  -->
                    <ListView
                        d:ItemsSource="{d:SampleData ItemCount=7}"
                        ItemsSource="{Binding Members}"
                        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                        ScrollViewer.IsDeferredScrollingEnabled="True"
                        ScrollViewer.VerticalScrollBarVisibility="Disabled"
                        SelectionMode="Single"
                        VirtualizingPanel.IsVirtualizing="True"
                        VirtualizingPanel.VirtualizationMode="Recycling">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel
                                    Orientation="Vertical"
                                    VirtualizingPanel.IsVirtualizing="True"
                                    VirtualizingPanel.VirtualizationMode="Recycling" />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>

                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <!--  内容更新時のバインドエラー回避のおまじない。  -->
                                <Setter Property="HorizontalAlignment" Value="Left" />
                                <Setter Property="HorizontalContentAlignment" Value="Left" />
                                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                            </Style>
                        </ListView.ItemContainerStyle>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <VirtualizingStackPanel
                                    Height="Auto"
                                    Orientation="Vertical"
                                    ScrollViewer.IsDeferredScrollingEnabled="true"
                                    VirtualizingPanel.IsVirtualizing="True"
                                    VirtualizingPanel.VirtualizationMode="Recycling">
                                    <view:MembersControl />
                                </VirtualizingStackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Border>

                <!--  上部右側の画面  -->
                <Border
                    Grid.Column="2"
                    Margin="0,31,0,0"
                    Background="White">
                    <!--  上部右側の画面のコンテンツをここに配置  -->

                    <Grid Margin="0,0,0,1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="4" />
                            <RowDefinition Height="32" MinHeight="32" />
                        </Grid.RowDefinitions>

                        <Grid.LayoutTransform>
                            <ScaleTransform CenterX="0" CenterY="0" ScaleX="{Binding ElementName=uiScaleSlider, Path=Value}" ScaleY="{Binding ElementName=uiScaleSlider, Path=Value}" />
                        </Grid.LayoutTransform>

                        <ListView
                            x:Name="ChatViewYourSelf"
                            Grid.Row="0"
                            d:ItemsSource="{d:SampleData ItemCount=7}"
                            ItemsSource="{Binding Chats, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, NotifyOnTargetUpdated=True}"
                            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                            ScrollViewer.IsDeferredScrollingEnabled="True"
                            ScrollViewer.VerticalScrollBarVisibility="Auto"
                            SelectionMode="Single"
                            TargetUpdated="ChatViewYourSelf_TargetUpdated"
                            VirtualizingPanel.IsVirtualizing="True"
                            VirtualizingPanel.VirtualizationMode="Recycling">
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel
                                        Orientation="Vertical"
                                        VirtualizingPanel.IsVirtualizing="True"
                                        VirtualizingPanel.VirtualizationMode="Recycling" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>

                            <ListView.ItemContainerStyle>
                                <Style TargetType="ListViewItem">
                                    <!--  内容更新時のバインドエラー回避のおまじない。  -->
                                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
                                </Style>
                            </ListView.ItemContainerStyle>

                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <VirtualizingStackPanel
                                        Height="Auto"
                                        Orientation="Vertical"
                                        ScrollViewer.IsDeferredScrollingEnabled="true"
                                        VirtualizingPanel.IsVirtualizing="True"
                                        VirtualizingPanel.VirtualizationMode="Recycling">
                                        <view:ChatControl />
                                    </VirtualizingStackPanel>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

                        <!--
                        <TextBox
                            x:Name="chatLog"
                            Grid.Row="0"
                            Margin="0,0,0,1"
                            VerticalContentAlignment="Bottom"
                            local:TextBoxBehaviors.AutoScrollToEnd="True"
                            FontSize="18"
                            IsReadOnly="True"
                            Text="{Binding Info.ChatLog, UpdateSourceTrigger=PropertyChanged}"
                            VerticalScrollBarVisibility="Auto" />
                        -->

                        <!--
                        <TextBox
                            x:Name="ChatInput"
                            Grid.Row="2"
                            Width="Auto"
                            VerticalAlignment="Center"
                            d:Text="チャット入力も実装。"
                            FontSize="14"
                            KeyDown="ChatInput_KeyDown"
                            TextWrapping="Wrap" />
                        -->

                        <ComboBox
                            x:Name="ChatInputCombo"
                            Grid.Row="2"
                            Margin="4,0,4,0"
                            materialDesign:HintAssist.Hint="チャット入力可能です。右クリックも使えます。"
                            materialDesign:HintAssist.IsFloating="True"
                            materialDesign:HintAssist.FloatingOffset="2,-13"
                            materialDesign:TextFieldAssist.DecorationVisibility="Hidden"
                            materialDesign:TextFieldAssist.HasClearButton="True"
                            materialDesign:TextFieldAssist.HasOutlinedTextField="True"
                            materialDesign:TextFieldAssist.UnderlineBrush="DarkBlue"
                            BorderThickness="0,0,0,1"
                            FontSize="14"
                            IsEditable="True"
                            KeyDown="ChatInputCombo_KeyDown" />

                        <Slider
                            x:Name="uiScaleSlider"
                            Maximum="2.0"
                            Minimum="0.6"
                            Visibility="Hidden"
                            Value="1" />
                    </Grid>

                </Border>
            </Grid>

        </Grid>
        <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding IsChecked, ElementName=MenuToggleButton}">
            <materialDesign:DrawerHost.LeftDrawerContent>
                <DockPanel MinWidth="220">
                    <ToggleButton
                        Margin="16"
                        HorizontalAlignment="Right"
                        DockPanel.Dock="Top"
                        IsChecked="{Binding IsChecked, ElementName=MenuToggleButton, Mode=TwoWay}"
                        Style="{StaticResource MaterialDesignHamburgerToggleButton}" />

                    <VirtualizingStackPanel
                        Margin="16,4"
                        Cursor=""
                        VirtualizingPanel.IsVirtualizing="true"
                        VirtualizingPanel.VirtualizationMode="Recycling">

                        <StackPanel
                            Margin="15,0,0,0"
                            Cursor=""
                            Orientation="Horizontal">
                            <CheckBox
                                Padding="9"
                                Click="MenuItem_Click"
                                Content="最前面固定"
                                FontWeight="DemiBold"
                                Foreground="#FF3F51B5"
                                IsChecked="{Binding WindowTopMost, Mode=TwoWay, Source={x:Static prop:Settings.Default}, UpdateSourceTrigger=PropertyChanged}" />
                        </StackPanel>

                        <StackPanel
                            Margin="15,0,0,0"
                            Cursor=""
                            Orientation="Horizontal">
                            <CheckBox
                                Padding="9"
                                Click="MenuItem_Click"
                                Content="リンク自動オープン"
                                FontWeight="DemiBold"
                                Foreground="#FF3F51B5"
                                IsChecked="{Binding OpenLink, Mode=TwoWay, Source={x:Static prop:Settings.Default}, UpdateSourceTrigger=PropertyChanged}" />
                        </StackPanel>

                        <StackPanel
                            Margin="15,0,0,0"
                            Cursor=""
                            Orientation="Horizontal">
                            <CheckBox
                                Padding="9"
                                Click="MenuItem_Click"
                                Content="スピーチさせる"
                                FontWeight="DemiBold"
                                Foreground="#FF3F51B5"
                                IsChecked="{Binding CanSpeech, Mode=TwoWay, Source={x:Static prop:Settings.Default}, UpdateSourceTrigger=PropertyChanged}" />
                        </StackPanel>

                        <StackPanel
                            Margin="15,0,0,0"
                            Cursor=""
                            Orientation="Horizontal">
                            <CheckBox
                                Padding="9"
                                Click="MenuItem_Click"
                                Content="VOICEVOXを使う"
                                FontWeight="DemiBold"
                                Foreground="#FF3F51B5"
                                IsChecked="{Binding UseVoiceVox, Mode=TwoWay, Source={x:Static prop:Settings.Default}, UpdateSourceTrigger=PropertyChanged}" />
                        </StackPanel>

                        <Button
                            x:Name="BtnCheckUpdate"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Left"
                            Click="BtnCheckUpdate_Click"
                            Style="{StaticResource MaterialDesignFlatButton}">
                            <DockPanel>
                                <materialDesign:PackIcon Kind="Update" />
                                <TextBlock
                                    Margin="10,0"
                                    Cursor=""
                                    Text="更新チェック" />
                            </DockPanel>
                        </Button>

                        <Button
                            x:Name="BtnSettings"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Left"
                            Click="BtnSettings_Click"
                            Style="{StaticResource MaterialDesignFlatButton}">
                            <DockPanel>
                                <materialDesign:PackIcon Kind="Toolbox" />
                                <TextBlock
                                    Margin="10,0"
                                    Cursor=""
                                    Text="設定" />
                            </DockPanel>
                        </Button>
                        <!--
                        <Button
                            x:Name="BtnOpen"
                            Margin="9,0,0,0"
                            HorizontalAlignment="Left"
                            Style="{StaticResource MaterialDesignFlatButton}">
                            <DockPanel>
                                <materialDesign:PackIcon Kind="FolderOpen" />
                                <TextBlock Margin="10,0" Text="ファイルを開く" />
                            </DockPanel>
                        </Button>
                        -->

                        <Button
                            x:Name="BtnExit"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Left"
                            Click="BtnExit_Click"
                            Style="{StaticResource MaterialDesignFlatButton}">
                            <DockPanel>
                                <materialDesign:PackIcon VerticalAlignment="Center" Kind="ExitToApp" />
                                <TextBlock
                                    Margin="10,0"
                                    VerticalAlignment="Center"
                                    Text="終了" />
                            </DockPanel>
                        </Button>

                    </VirtualizingStackPanel>
                </DockPanel>
            </materialDesign:DrawerHost.LeftDrawerContent>

            <materialDesign:ColorZone
                Padding="10,4,10,4"
                VerticalAlignment="Top"
                Mode="PrimaryDark">
                <DockPanel>
                    <VirtualizingStackPanel
                        Orientation="Horizontal"
                        VirtualizingPanel.IsVirtualizing="true"
                        VirtualizingPanel.VirtualizationMode="Recycling">
                        <!--
                        <Button
                            x:Name="StartButton"
                            Margin="12,0,0,0"
                            Padding="4,4,4,4"
                            VerticalAlignment="Center"
                            Content="監視開始"
                            FontSize="10" />
                        <Button
                            x:Name="StopButton"
                            Margin="0,0,0,0"
                            Padding="4,4,4,4"
                            VerticalAlignment="Center"
                            Content="監視終了"
                            FontSize="10" />
                        -->
                        <ToggleButton
                            x:Name="MenuToggleButton"
                            Width="22"
                            Height="22"
                            AutomationProperties.Name="HamburgerToggleButton"
                            Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
                    </VirtualizingStackPanel>
                    <VirtualizingStackPanel
                        HorizontalAlignment="Right"
                        Orientation="Horizontal"
                        VirtualizingPanel.IsVirtualizing="true"
                        VirtualizingPanel.VirtualizationMode="Recycling">
                        <Button
                            x:Name="ExitButton"
                            Height="21"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Center"
                            HorizontalContentAlignment="Right"
                            Click="ExitButton_Click"
                            Content="退室"
                            FlowDirection="RightToLeft"
                            FontSize="10"
                            IsEnabled="{Binding Info.IsEntered, UpdateSourceTrigger=PropertyChanged}" />
                    </VirtualizingStackPanel>
                </DockPanel>
            </materialDesign:ColorZone>
        </materialDesign:DrawerHost>

        <StatusBar Margin="1,1,1,1" VerticalAlignment="Bottom">
            <TextBlock
                x:Name="StatusMessage1"
                HorizontalAlignment="Left"
                Text="{Binding Info.SysInfo, UpdateSourceTrigger=PropertyChanged}" />
        </StatusBar>
    </Grid>


</Window>