如何将LiveCharts饼图图例置于底部并保持垂直方向？

我当前正在使用LiveCharts库创建基础PieChart，希望保留图例，但将其置于底部且保持图例项的垂直排列。

问题在于当我将LegendPosition从Right改为Bottom时，图例确实移到了底部，但方向变为水平，导致图例无法适配现有Border的布局，水平方向超出了范围。

当前代码如下：

<Border CornerRadius="10"
        Background="White"
        Grid.Column="1"
        Grid.RowSpan="2"
        Margin="10">

    <lvc:PieChart Series="{Binding Series}"
                  Title="{Binding Title}"
                  LegendPosition="Bottom">
    </lvc:PieChart>

</Border>

问题示意图：

解决方案 #

要实现底部垂直排列的图例，你可以直接替换默认图例为DefaultLegend并指定其Orientation为Vertical，同时保持LegendPosition="Bottom"，这种方式简洁高效：

<Border CornerRadius="10"
        Background="White"
        Grid.Column="1"
        Grid.RowSpan="2"
        Margin="10">
    <lvc:PieChart Series="{Binding Series}"
                  Title="{Binding Title}"
                  LegendPosition="Bottom">
        <!-- 自定义图例，设置垂直排列并水平居中 -->
        <lvc:PieChart.Legend>
            <lvc:DefaultLegend Orientation="Vertical" 
                               HorizontalAlignment="Center"
                               Margin="5"/>
        </lvc:PieChart.Legend>
    </lvc:PieChart>
</Border>

如果需要更灵活的样式控制，也可以通过自定义LegendTemplate来实现：

<Border CornerRadius="10"
        Background="White"
        Grid.Column="1"
        Grid.RowSpan="2"
        Margin="10">
    <lvc:PieChart Series="{Binding Series}"
                  Title="{Binding Title}"
                  LegendPosition="Bottom">
        <lvc:PieChart.LegendTemplate>
            <ControlTemplate>
                <ItemsControl ItemsSource="{Binding Items}"
                              Orientation="Vertical"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Margin="5">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="2 3">
                                <Rectangle Width="14" Height="14" Fill="{Binding Fill}" Margin="0 0 6 0"/>
                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ControlTemplate>
        </lvc:PieChart.LegendTemplate>
    </lvc:PieChart>
</Border>

两种方式都能让图例在底部垂直排列，且自动适配Border的宽度，不会出现超出范围的问题。

内容的提问来源于stack exchange，提问作者Jess Chan