如何在 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 - 我有一个滑块，您可以在其中查看 select 个面板，根据它的值，我更改 Visibility 个不同的面板和 [=13] =] 还有。
如果您在代码隐藏中更改 Visibility，那么您也可以在代码隐藏中更改 ItemsPanel 或 ItemsControl。
因此，当您需要单个面板时，您将其设置为简单的 Grid，如果两个面板：UniformGrid 1x2，如果三个面板：Grid 具有两个相等的行和两个相等的列，并注意 Grid.Row、Grid.Column、Grid.ColumnSpan 面板上定义的属性。对于四个面板，我们使用 UniformGrid 2x2.
希望对您有所帮助。

重要：这仅在您的面板应始终按相同顺序排列时才有效，例如，如果“Part2”被隐藏，Part3 将不可见.否则，它会有点棘手 - 您将需要将内容动态分配给各个部分。

UPD：要在 window 上查看 DataTemplate，您可以使用 ContentControl:

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

如何在 WPF 面板上获得堆叠图？

How can I get stacked plots on the panel in WPF?

c#

wpf

uniformgrid

scottplot