RadRibbonView and FlowDirection

[Alexandre]

Hello,

I have a window that contains a RadRibbonView:

<telerik:RadRibbonView x:Name="PART_MainMenu" BackstageClippingElement="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=telerik:RadDockPanel}}"  IsMinimizable="true">
            <telerik:RadRibbonView.Backstage>
                <telerik:RadRibbonBackstage x:Name="backstage" BackstagePosition="Office2013" Background="{StaticResource ATS_Brush_Gray240}">                                    <telerik:RadRibbonBackstageItem Header="Informations">
                        <Grid>
                            <TextBlock Text="Log-out" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="DarkSlateGray"/>
                        </Grid>
                    </telerik:RadRibbonBackstageItem>                                       
                </telerik:RadRibbonBackstage>
            </telerik:RadRibbonView.Backstage>

</telerik:RadRibbonView>

 

I display a simple text "Log-out" in a single telerik:RadRibbonBackstageItem.

I change by code the property Thread.CurrentThread.CurrentUICulture to an arabic culture.

I change equally by code the property FlowDirection of the window to the value RightToLeft.

Because of property value inheritance, this property is supposed to be automatically changed for all child elements.

However, the text is mirrored (see file in attachment).

How can we fix that issue ?

 

Thanks,

Alexandre

[Vladimir Stoyanov]

Hello Alexandre,

Thank you for the shared picture. 

I tested the described scenario on my end, however I was not able to replicate the shown result. I am attaching the sample project that I used for testing purposes.

Can you check it out and see how it differs from the setup on your end? You can also place a TextBlock outside the RadRibbonView to see, if the same behavior is reproduced. 

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

[Alexandre]

Hello Vladimir,

 

Thanks for your answer.

However, I reproduced the issue using your sample project.

I just made a few modifications:

• I removed the Flow direction property setting from the MainWindow xaml code

• I added a button in the view to be able to change the culture and flow direction in Runtime:

<Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"  />
                                <RowDefinition Height="50"  />
                            </Grid.RowDefinitions>
                            <Button Grid.Row="0" Click="Button_Click">Switch to Right to left direction</Button>
                            <TextBlock Grid.Row="1" Text="Log-out" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="DarkSlateGray"/>
                        </Grid>

• I removed culture change from the constructor

 

 

    public MainWindow()
        {
            InitializeComponent();
        }

• I added the button click button to change the culture and the FlowDirection property of the MainWindow:
          private void Button_Click(object sender, RoutedEventArgs e)
          {
              var culture = new CultureInfo("ar");
              Thread.CurrentThread.CurrentCulture = culture;
              Thread.CurrentThread.CurrentUICulture = culture;
  
              this.FlowDirection = FlowDirection.RightToLeft;
          }

[Vladimir Stoyanov]

Hi Alexandre,

Thank you for the update. 

When changing the culture and flow direction during runtime, you can make sure to force the controls to be redrawn. Here is an example approach for that:

var culture = new CultureInfo("ar");
Thread.CurrentThread.CurrentCulture = culture;
Thread.CurrentThread.CurrentUICulture = culture;

this.FlowDirection = FlowDirection.RightToLeft;

var template = this.Template;
this.Template = null;
this.Template = template;

            // This is needed to reopen the backstage after the control is redrawn 
            Dispatcher.BeginInvoke(new Action(() =>
            {
                this.PART_MainMenu.IsBackstageOpen = false;
                this.PART_MainMenu.IsBackstageOpen = true;
            }), DispatcherPriority.Loaded);

Do try this out and let me know how it goes. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Alexandre]

Hi Vladimir,

Thanks for your answer.

I subscribed to the value changed of the dependency property FlowDirection:

var pd = DependencyPropertyDescriptor.FromProperty(FlowDirectionProperty, typeof(MainWindow));
            pd.AddValueChanged(this, OnFlowDirectionPropertyChanged);

And I execute your code in the callback OnFlowDirectionPropertyChanged.

It works well with your sample project but unfortunately, the view becomes unclickable in my project.

Do you have any idea about this issue ?

Regards,
Alexandre

[Vladimir Stoyanov]

Hello Alexandre,

Thank you for the update. 

It is difficult to say what might be the reason for the described behavior without being able to replicate it on my end. What comes to mind is delaying the refreshing of the Template property. You can try wrapping the switching of the Template in another Dispatcher: 

Dispatcher.BeginInvoke(new Action(() =>
{

var template = this.Template;
this.Template = null;
this.Template = template;

            // This is needed to reopen the backstage after the control is redrawn 
            Dispatcher.BeginInvoke(new Action(() =>
            {
                this.PART_MainMenu.IsBackstageOpen = false;
                this.PART_MainMenu.IsBackstageOpen = true;
            }), DispatcherPriority.Loaded);

}), DispatcherPriority.Loaded);

If the above suggestion does not prove helpful, you can modify the sample project in order to better resemble your scenario, replicate the observed on your end behavior and you can send it over in a new support ticket (since project files cannot be added to forum posts). This will hopefully allow me to investigate further and better assist you.  

Regards,
Vladimir Stoyanov
Progress Telerik

[Alexandre]

Hello Vladimir,

Sorry, the above suggestion does not prove helpful.
As suggested, I modified the sample project to reproduce the issue.
I created a UserControl named MainMenuView.
I moved the full code of the RadRibbonView (xaml and code behind) into this UserControl.
The window contains only the reference to this UserControl:
<local:MainMenuView />
After clicking on button to change FlowDirection, the view becomes unclickable.

Regards,
Alexandre

[Vladimir Stoyanov]

Hello Alexandre,

I modified the sample project attached earlier, however I was not able to reproduce the described behavior. On my end, I can interact with the backstage items after the FlowDirection and culture are changed.

I am attaching back the updated sample project, which I used for testing. Can you check it out and let me know, if I am missing something? 

I am looking forward to your reply. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Alexandre]

Hello Vladimir,

Thanks for the updated sample project.
Actually, if we move the FlowDirection code (subscription and callback) from the code behind of the Window to the code behind of the UserControl, the view becomes unclickable.

With your sample, it is indeed possible to interact with the backstage items again.

However, there is a flickering view issue : we can see very quickly the other backstage item.
Do you know why the code doesn’t work when it is executed in the code behind of the UserControl ?
How can we avoid this flickering view issue ?

Regards,
Alexandre

[Vladimir Stoyanov]

Hello Alexandre,

You can make sure to reset the Template of the MainWindow when executing the code from the UserControl:

public partial class MainView : UserControl
    {
        public MainView()
        {
            InitializeComponent();

            var pd = DependencyPropertyDescriptor.FromProperty(FlowDirectionProperty, typeof(MainWindow));
            pd.AddValueChanged(this, OnFlowDirectionPropertyChanged);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.ParentOfType<MainWindow>().FlowDirection = FlowDirection.RightToLeft;
        }

        private void OnFlowDirectionPropertyChanged(object sender, EventArgs e)
        {
            var culture = new CultureInfo("ar");
            Thread.CurrentThread.CurrentCulture = culture;
            Thread.CurrentThread.CurrentUICulture = culture;

            var window = this.ParentOfType<MainWindow>();
            var template = window.Template;
            window.Template = null;
            window.Template = template;

            // This is needed to reopen the backstage after the control is redrawn 
            Dispatcher.BeginInvoke(new Action(() =>
            {
                var ribbonView = this.ChildrenOfType<RadRibbonView>().First();

                ribbonView.IsBackstageOpen = false;
                ribbonView.IsBackstageOpen = true;
            }), priority: DispatcherPriority.ApplicationIdle);

        }
    }

With regards to the flickering, I am afraid that I cannot suggest a way to avoid it. It takes some time in order for the view to be redrawn, which is necessary to reset the culture. 

I hope you find this helpful. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Alexandre]

Hello Vladimir,

Thanks ! The code works well in the UserControl.

I would like to know if there will be a fix in the next Telerik deliveries to avoid any control redraw when changing the flow direction of the application ?

Regards,

Alexandre

 

 

[Vladimir Stoyanov]

Hello Alexandre,

I am glad to hear that you found the previous suggestion helpful. 

I am afraid that there isn't an option to avoid the redrawing when the FlowDirection is changed. The same will be true for any other WPF control. It is important for a control to be redrawn in order for it to be displayed with the new flowdirection. The heavier the control is (the more UIElements that is has) , the redrawing will be more noticable, since it takes some time.

Regards,
Vladimir Stoyanov
Progress Telerik