c# - 如何在 WPF 的面板上获取堆叠图？

Question

我想知道你能不能帮我做点什么。我试图得到像这张照片一样的堆积图。

我UniformGrid过去试图得到这样的东西，但这是不正确的。

<UniformGrid x:Name="plots" Rows="2">
            <StackPanel x:Name="plot1" IsEnabled="False" Visibility="Collapsed">
                <Grid MinWidth="300" MinHeight="300">
                    <WpfPlot x:Name="hr_graph"/>
                </Grid>
            </StackPanel>
            <StackPanel x:Name="plot2" IsEnabled="False" Visibility="Collapsed">
                <Grid MinWidth="300" MinHeight="300" >
                    <WpfPlot x:Name="sat_graph"/>
                </Grid>
            </StackPanel>
            <StackPanel x:Name="plot3" IsEnabled="False" Visibility="Collapsed">
                <Grid MinWidth="300" MinHeight="300">
                    <WpfPlot x:Name="pul_graph"/>
                </Grid>
            </StackPanel>
            <StackPanel x:Name="plot4" IsEnabled="False" Visibility="Collapsed">
                <Grid MinWidth="300" MinHeight="300">
                    <WpfPlot x:Name="per_graph" />
                </Grid>
            </StackPanel>
        </UniformGrid>

Answer 1

你可以使这个容器只是一个通用的，并根据可见面板的数量来ItemsControl改变它。 例如：ItemsPanel

<DataTemplate x:Name="PartsLayout">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Slider x:Name="Slider" Margin="6" Value="4" Minimum="1" Maximum="4" TickFrequency="1" IsSnapToTickEnabled="True" />
            <TextBlock Grid.Column="1" Margin="6" Text="{Binding Value, ElementName=Slider}" />
        </Grid>
        <ItemsControl x:Name="Items" Grid.Row="1">
            <StackPanel x:Name="Part1" Background="Yellow" Grid.Row="0" Grid.Column="0" />
            <StackPanel x:Name="Part2" Background="Green" Grid.Row="0" Grid.Column="1" />
            <StackPanel x:Name="Part3" Background="Red" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
            <StackPanel x:Name="Part4" Background="Blue" Grid.Row="1" Grid.Column="1" />
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="2" Columns="2" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Value, ElementName=Slider}" Value="3">
            <Setter TargetName="Part4" Property="Visibility" Value="Collapsed" />
            <Setter TargetName="Items" Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding Value, ElementName=Slider}" Value="2">
            <Setter TargetName="Part4" Property="Visibility" Value="Collapsed" />
            <Setter TargetName="Part3" Property="Visibility" Value="Collapsed" />
            <Setter TargetName="Items" Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <UniformGrid Rows="1" Columns="2" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding Value, ElementName=Slider}" Value="1">
            <Setter TargetName="Part4" Property="Visibility" Value="Collapsed" />
            <Setter TargetName="Part3" Property="Visibility" Value="Collapsed" />
            <Setter TargetName="Part2" Property="Visibility" Value="Collapsed" />
            <Setter TargetName="Items" Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <Grid />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

那是普通的 xaml - 我有一个滑块，您可以在其中选择要查看的面板数量，并根据其值更改Visibility不同的面板ItemsPanel以及。
如果您正在更改Visibility代码隐藏，那么您也可以更改代码隐藏ItemsPanel。 因此，当您需要单个面板时，请将其设置为 simple ，如果两个面板：，如果三个面板：具有两个相等的行和两个相等的列，并注意面板上定义的、、属性。对于四个面板，我们使用. 希望，这有帮助。ItemsControl
GridUniformGrid 1x2GridGrid.RowGrid.ColumnGrid.ColumnSpanUniformGrid 2x2

重要提示：这仅在您的面板应始终处于相同顺序时才有效，例如，Part3如果“Part2”被隐藏，则无法显示。否则，这有点棘手 - 您需要将内容动态分配给部件。

UPD：要DataTemplate在窗口上查看，您可以使用ContentControl：

<ContentControl Content="1">
   <ContentControl.ContentTemlate>
      ... Put DataTemplate here ...
   </ContentControl.ContentTemplate>
</ContentControl>