C#分屏问题，最好有说明啊

Question

函数可以分屏显示，竖屏显示，最多8个，每一个都包括放大缩小，界面自行设定；
注意：函数图像移动和分屏显示是各自独立功能，<UserControl x:Class="Calculator.GraphForm"
         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:Calculator"
         xmlns:graph="clr-namespace:CommonUtils.GraphicalCanvas;assembly=CommonUtils"
         xmlns:shared="clr-namespace:CommonUtils;assembly=CommonUtils"
         mc:Ignorable="d" 
         d:DesignHeight="313" d:DesignWidth="512">
<UserControl.Resources>

    <Style TargetType="ListBoxItem">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#fF242424"/>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF545454"/>
        </Style.Resources>
        <Setter Property="Foreground" Value="{StaticResource Forecolor}" />
        <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
    </Style>

    <ControlTemplate x:Key="myTextTemplate" TargetType="TextBoxBase">
        <Border 
            BorderThickness="0.4"
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding Foreground}" 
            >
                <ScrollViewer Name="PART_ContentHost" 
                    SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" 
                    HorizontalContentAlignment="Center" 
                    VerticalContentAlignment="Center"/>
        </Border>
    </ControlTemplate>

    <shared:ColorListPopup x:Key="ColorPopup"
            IsOpen="False" 
            StaysOpen="False"
            Placement="Bottom" 
            AllowsTransparency="True"
            Width="200"
            Height="200"
            >
        <shared:ColorListBox x:Name="PART_ColorList" Background="White" ShowDetail="False"></shared:ColorListBox>
    </shared:ColorListPopup>

    <ControlTemplate x:Key="_notSelected" TargetType="{x:Type Control}">
        <StackPanel Orientation="Horizontal" Height="25" >
            <CheckBox IsChecked="{Binding IsEnabled}" VerticalAlignment="Center" Margin="5,0,5,0"/>

            <Button Width="20" Height="8" Click="OnClick" Focusable="False" >
                <Button.Template>
                    <ControlTemplate>
                        <StackPanel>
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Content="{TemplateBinding Button.Content}" />
                        </StackPanel>
                    </ControlTemplate>
                </Button.Template>
                <Button.Content>
                    <Border BorderBrush="DarkGray" BorderThickness="0.5" Background="{Binding GraphColor}" 
                            Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
                </Button.Content>
            </Button>

            <TextBlock Text="{Binding Equation}" Margin="3,3,0,0"
                       />
        </StackPanel>
    </ControlTemplate>

    <ControlTemplate x:Key="_selected" TargetType="{x:Type Control}">
        <DockPanel Height="25">
            <CheckBox IsChecked="{Binding IsEnabled}" VerticalAlignment="Center" Margin="5,0,5,0"/>

            <Button Width="20" Height="8" Click="OnClick" Focusable="False">
                <Button.Template>
                    <ControlTemplate>
                        <StackPanel>
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Content="{TemplateBinding Button.Content}" />
                        </StackPanel>
                    </ControlTemplate>
                </Button.Template>
                <Button.Content>
                    <Border BorderBrush="DarkGray" BorderThickness="0.5" Background="{Binding GraphColor}" 
                            Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
                </Button.Content>
            </Button>


            <TextBox Text="{Binding Equation}"
                     x:Name="m_equationEdit"
                     SelectionBrush="LightGray"
                     CaretBrush="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}" 
                     Template="{StaticResource myTextTemplate}" VerticalContentAlignment="Center" >
                <TextBox.Background>
                    <DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
                </TextBox.Background>
            </TextBox>
        </DockPanel>
    </ControlTemplate>

    <DataTemplate DataType="{x:Type local:GraphItem}">
        <Control x:Name="_container" Template="{StaticResource _notSelected}" />
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True">
                <Setter TargetName="_container" Property="Template" Value="{StaticResource _selected}" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:NewGraphItem}">
        <Border Height="25">
            <Button Click="OnNewClicked"
                    Style="{StaticResource StyleBlackButton}">
                Click to add new...
            </Button>
        </Border>
    </DataTemplate>

</UserControl.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="24" />
        <RowDefinition Height="273*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="235*" />
        <ColumnDefinition Width="44*"/>
        <ColumnDefinition Width="33"/>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="1" Grid.Row="1" BorderBrush="DarkGray" BorderThickness="0.5" Margin="3" Grid.ColumnSpan="3">
        <graph:CanvasCtrl Background="Black" x:Name="m_canvas" Margin="-0.5,-0.5,-131.5,0.5" />
    </Border>
    <Grid  Grid.Column="1" Grid.ColumnSpan="3" Margin="10,14,-10,10" Grid.RowSpan="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="241*" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <TextBlock x:Name="m_label" FontSize="10" Grid.Row="1" Text="some text"
                   Margin="6,0,0,3"
                   VerticalAlignment="Bottom"
                   Foreground="Wheat"
                   />
    </Grid>
    <ListBox Grid.RowSpan="2" 
             x:Name="m_itemsListBox"
             Background="Transparent"
             ItemsSource="{Binding GraphItems}" 
             HorizontalContentAlignment="Stretch"
             SelectionChanged="OnGraphSelectionChanged"
             />
    <Button Content="Calc" Height="23" HorizontalAlignment="Left" Margin="0,4,0,0" 
            VerticalAlignment="Top" Width="75" Click="OnRecalc" 
            Style="{StaticResource StyleBlackButton}" Grid.Column="1" Grid.RowSpan="2"/>
    <Button Content="Zoom" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="160,-1,0,0" VerticalAlignment="Top" Width="75" Click="ZoomToFit"
            Style="{StaticResource StyleBlackButton}"/>
    <Button Content="Center" Height="23" HorizontalAlignment="Left" Margin="80,1,0,0" VerticalAlignment="Top" Width="75" Click="CenterCanvas"
            Style="{StaticResource StyleBlackButton}" RenderTransformOrigin="0.087,0.086" Grid.Column="1"/>
    <Button Content="Left" Grid.Column="2" Margin="3,0,10,1" Click="CenterCanvas"
            Style="{StaticResource StyleBlackButton}" Grid.ColumnSpan="2"/>
    <Button Content="Right" Grid.Column="3" Height="23" HorizontalAlignment="Left" Margin="28,-1,-57,0" VerticalAlignment="Top" Width="62" Click="CenterCanvas"
            Style="{StaticResource StyleBlackButton}"/>
    <Button Content="UpDown" Grid.Column="3" Click="CenterCanvas"
            Style="{StaticResource StyleBlackButton}" Margin="95,-2,-121,2"/>
</Grid>

分屏显示中也要

Answer 1

建议您使用 Grid 布局，将多个 UserControl 放在不同的行列单元格中，这样就可以实现分屏显示。

---

你可以在 Grid 布局中设置行列的数量和大小，然后通过将 UserControl 放在相应的行列单元格中来实现分屏显示。
举个例子：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition width="*" />
        <ColumnDefinition width="*" />
    </Grid.ColumnDefinitions>

    <UserControl Grid.Row="0" Grid.Column="0" />
    <UserControl Grid.Row="0" Grid.Column="1" />
    <UserControl Grid.Row="1" Grid.Column="0" />
    <UserControl Grid.Row="1" Grid.Column="1" />
</Grid>

这样就会在一个窗口中显示出四个 UserControl，每个占据一个行列单元格。

---

你可以调整行列的数量和大小来控制分屏效果，例如增加行列的数量或者调整行列的大小来改变分屏的布局。
此外，你可以使用 Viewbox 控件来实现放大缩小功能，例如：

<Viewbox>
    <UserControl />
</Viewbox>

使用 Viewbox 包裹住你的 UserControl 即可实现放大缩小功能。