Why is RadPain not closed when I click 'Close' button in the right upper coner?

[Dmitry]

Hello. When I want to close RadPain and click 'Close' button ('X') in right upper corner of the RadPain then this RadPain is not closed. Below is XAML where RadPain is:

<UserControl x:Class="DeviceReading.Views.DeviceReadingView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             prism:ViewModelLocator.AutoWireViewModel="True">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" Margin="0 5 0 3" Orientation="Horizontal">
            <CheckBox Content="Gas velocity" Command="{Binding Path=ShowHideGasVelocityChartViewCommand}" CommandParameter="{Binding Path=IsChecked, RelativeSource={RelativeSource Self}}"/>
        </StackPanel>
        <telerik:RadDocking Grid.Row="1" Grid.Column="0" x:Name="Docking">
             <telerik:RadSplitContainer>
                <telerik:RadPaneGroup>
                    <telerik:RadPane DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadDocking}}, Path=DataContext}" Header="Gas Velocity"
                        prism:RegionManager.RegionName="GasVelocityChartRegion" IsHidden="{Binding IsGasVelocityChartHidden, Mode=TwoWay}"/>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>
    </Grid>
</UserControl>

Below is the definition of ShowHideGasVelocityChartViewCommand command that is bound to Command property of CheckBox:

public DelegateCommand<object> ShowHideGasVelocityChartViewCommand { get; private set; }
private void showHideGasVelocityChartView(object parameter)
{
   if ((bool)parameter == true)
      this.IsGasVelocityChartHidden = true;
   else
      this.IsGasVelocityChartHidden = false;
}

Below is the definition of IsGasVelocityChartHiden property that is bound to IsHidden property of the RadPain.

public bool IsGasVelocityChartHidden
{
   get { return this._isGasVelocityChartHidden; }
   set { this.SetProperty(ref this._isGasVelocityChartHidden, !value); }
}

During application runtime, this RadPain contains View with the dynamically changed chart of gas velocity. This RadPain is shown and hidden by the click on the CheckBox (when the CheckBox is checked then the RadPain is visible, but when the CheckBox is unchecked then the RadPain is invisible - hidden). But I want that this RadPain can ALSO be hidden by clicking of its 'Close' ('X') button that is in the right upper corner of this RadPain. And when the RadPain is closed by clicking its 'Close' ('X') button then the CheckBox must set to Unchecked status so that after I can click on CheckBox, set it to 'Checked' status and visualize the RadPain again. Please help me if this is possible to do it.

[Nasko]

Hello Yaroslav,

In order to achieve the desired you could bind the IsChecked property of the CheckBox to a property inside the ViewModel and update the value of that property only when the Pane is closed through the Button - at that moment the IsChecked and IsHidden properties will have opposite values.

Please, check the attached sample that demonstrates that approach.

Hope this helps.

Regards,
Nasko
Telerik by Progress

[Dmitry]

Hello, Nasko. Thank you for your example, but you did not consider one thing - there is value's inversion in IsGasVelocityChartHidden property.

public bool IsGasVelocityChartHidden
{
   get { return this._isGasVelocityChartHidden; }
   set { this.SetProperty(ref this._isGasVelocityChartHidden, !value); }
}

This is done on purpose that in my application chart is not visible initially and so that the CheckBox is in 'Unchecked status' (the Content property of the CheckBox is the string with chart's name). And only when user is clicking on the CheckBox and setting the CheckBox in 'Checked' status then the chart became visible. That's why I'm asking, how do I close (hide) the RadPain not only by checkbox's unchecking but also by 'Close' ('X') button's clicking.

[Dmitry]

I bag your pardon, Nasko. I solve the problem in the following way. The XAML markup of the CheckBox is:

<CheckBox Content="Скорость газа" Command="{Binding Path=ShowHideGasVelocityChartViewCommand}" CommandParameter="{Binding Path=IsChecked, RelativeSource={RelativeSource Self}}"
                      IsChecked="{Binding IsGasVelocityChecked}"/>

So I've bound CheckBox's 'IsChecked' property as you adviced me. Then I've changed the command method reverted 'false' and 'true' there in following way:

private void showHideGasVelocityChartView(object parameter)
{
    if ((bool)parameter == true)
       this.IsGasVelocityChartHidden = false;
    else
       this.IsGasVelocityChartHidden = true;
}

Here is the definitions of the properties which I use:

// Show / hide the chart
public bool IsGasVelocityChartHidden
{
   get { return this._isGasVelocityChartHidden; }
   set { if (this.SetProperty(ref this._isGasVelocityChartHidden, value)) this.IsGasVelocityChecked = !value; }
}

// Check / uncheck the CheckBox.
public bool IsGasVelocityChecked
{
   get { return this._isGasVelocityChecked; }
   set { this.SetProperty(ref this._isGasVelocityChecked, value); }
}

And in constructor of the ViewModel I initially call:

this.showHideGasVelocityPerBeamChartView(true);
            if (!this.IsGasVelocityPerBeamChecked) this.IsGasVelocityPerBeamChecked = true;

And after (during the application sesion) I can fluently visualize / devisualize required chart so many times as I want using the CheckBox or 'Close' (X) button.

Thank you very much for your help and tips.

[Nasko]

Hello Yaroslav,

I am glad to here you were able to achieve the desired behavior and now everything is working as expected for you. Thank you also for sharing your approach with the community.

If you have any additional questions or concerns regarding Telerik controls, please do not hesitate to contact us.

Regards,
Nasko
Telerik by Progress