CartesianChart Visibility Visible/Collapsed

[AhernarVega]

Hello. Found a problem. There is a window with 3 graphs on it. The first one is shown by default: Visibility = "Visible" The other 2 are hidden: Visibility = "Collapsed" The visibility property of the other two graphs are tied to their own properties. One of them looks like this: private Visibility showChart1; public Visibility ShowChart1 { get => showChart1; set { Set(ref showChart1, value); // For INPC } Using the checkBox I switch the visibility of the graphs. When I initialize the property fields with the value Collapsed in the constructor, a place for the graph is allocated on the window, but it does not appear. When I initialize the property fields with the value Visible in the constructor, they are displayed and switched on the window... it works correctly - when you uncheck the box, the graph disappears and the place is vacated. And vice versa, if there is a check mark, then the graph appears. A separate property of the bool type is used for the checkBox, when it is updated, the graph display property is switched.

[AhernarVega]

At the moment, it is decided that the visibility property is initially set to Hidden, and then when the display value changes, the height of the graph changes from 0 to the desired one. (Well, then Collapsed itself works fine)

[DimitriGerster]

I think I struggled with the same issue.

I toggle the visibility of two CartesianCharts depending on the selected item of a combobox. But once a chart has been set to Visibility="Collapsed" it does not appear again. It still contributes to the layout pass and is hittable but it does not render anything.

The solution so far

Hide the charts with Visibility="Hidden". Then they properly appear again when setting Visibility="Visible".

Example

C

public object Sync0 { get; } = new object();
public ISeries[] Series0 { get; set; } = new ISeries[] {
    new LineSeries<ObservablePoint>
        {
            Values = new ObservableCollection<ObservablePoint>{new ObservablePoint(0,1), new ObservablePoint(1,3), new ObservablePoint(2,2)},
            Stroke = new SolidColorPaint(new SkiaSharp.SKColor(255,0,0)),
            Fill = null,
            GeometryFill = null,
            GeometryStroke = null
        }
};
public object Sync1 { get; } = new object();
public ISeries[] Series1 { get; set; } = new ISeries[] {
    new LineSeries<ObservablePoint>
        {
            Values = new ObservableCollection<ObservablePoint>{new ObservablePoint(0,3), new ObservablePoint(1,1), new ObservablePoint(2,5)},
            Stroke = new SolidColorPaint(new SkiaSharp.SKColor(0,255,0)),
            Fill = null,
            GeometryFill = null,
            GeometryStroke = null
        }
};

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />                        
    </Grid.RowDefinitions>

    <ComboBox x:Name="combobox0"
                        Grid.Row="0"
                        SelectedIndex="0">
        <ComboBoxItem Content="Chart0" />
        <ComboBoxItem Content="Chart1" />
    </ComboBox>

    <lvc:CartesianChart Series="{Binding Series0}"
                        SyncContext="{Binding Sync0}"
                        Grid.Row="1">
        <lvc:CartesianChart.Style>
            <Style TargetType="{x:Type lvc:CartesianChart}">
                <Setter Property="Visibility"
                        Value="Visible" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox0}"
                                 Value="1">
                        <Setter Property="Visibility"
                                Value="Collapsed" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </lvc:CartesianChart.Style>
    </lvc:CartesianChart>

    <lvc:CartesianChart Series="{Binding Series1}"
                        SyncContext="{Binding Sync1}"
                        Grid.Row="1">
        <lvc:CartesianChart.Style>
            <Style TargetType="{x:Type lvc:CartesianChart}">
                <Setter Property="Visibility"
                        Value="Collapsed" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox0}"
                                 Value="1">
                        <Setter Property="Visibility"
                                Value="Visible" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </lvc:CartesianChart.Style>
    </lvc:CartesianChart>

</Grid>

[DimitriGerster]

These closed issues describe the same error:

• https://github.com/beto-rodriguez/LiveCharts2/issues/514
• https://github.com/beto-rodriguez/LiveCharts2/issues/270

Their proposed solution to set Visibility="Hidden" instead of "Collapsed" is not a viable solution since the same error occurs when a parent control is collapsed. It cannot be the suggested behaviour to never use "Collapsed" when using LiveCharts.