Textblock styling & Ribbon Control combined with dockingmanager

[NM van Strien]

Hello,

I am learning about SyncFusion controls.

I am trying to make WPF project with .Net Core 3 in which I combine a ribboncontrol and a dockingmanager. I have a few questions.

Is it possible open/close usercontrols in the dockingmanager when clicking different ribbontabs/buttons? Is it possible to create a default layout with different usercontrols in the dockingmanager associated with each Ribbon tabgroup?

For one of my usercontrols, I am trying to create an Outlook type alphabetic index next to a list of contact names. I notice there is no textblock control by SF and I was wondering how to inherit the selected SF style template from the main App when hovering the mouse over the default WPF textblock/selecting the textblock in the same manner as SFTreeView (see attached image/project).

Thank you for your help.

Kind regards,

Niels van Strien

Attachment: Example_4e5ea946.7z

[Anirudhan Iyyappan]

Hi Niels van Strien, 

Thank you for contacting Syncfusion support. 

Query 1: “Is it possible open/close usercontrols in the dockingmanager when clicking different ribbontabs/buttons?” 

 

We've checked your query. You can achieve this requirement of “open/close usercontrols in the dockingmanager when clicking different ribbontabs/buttons”  by using the Ribbon.SelectedIndexChanged event, we can display the window while switch the tabs. For further reference please refer to the below sample. 

Sample: https://www.syncfusion.com/downloads/support/forum/154632/ze/SYNCFU~1886092843 

Query 2: “when hovering the mouse over the default WPF textblock/selecting the textblock in the same manner as SFTreeView” 

We can achieve your requirement by using below code snippet. 

Code snippet: 

<TextBlock x:Name="Index123" Text="123" Grid.Row="0" Margin="2 1 2 1" FontSize="10" HorizontalAlignment="Center" VerticalAlignment="Center" Width="20" Height="20">               

   <TextBlock.Style> 

      <Style TargetType="{x:Type TextBlock}"> 

         <Style.Triggers> 

              <Trigger Property="IsMouseOver" Value="True"> 

                   <Setter Property="Background" Value="Red"/> 

              </Trigger> 

          </Style.Triggers> 

       </Style> 

    </TextBlock.Style> 

</TextBlock> 

If we have misunderstood any of your query, please let us know and share some more information based on your requirement. Which would be helpful for us to let you a solution as soon as possible. 

Regards, 

Anirudhan 

[NM van Strien]

Hi Anirudhan,

Thank you for your quick reply.

Regarding Query 1.

Ribbon.SelectedIndexChanged will help. I wasn't planning on opening a new window, but to replace the useercontrols in the DockingAdapter. This probably requires an EventAggregator and some method in the DockingAdapterViewModel to take in the SelectedRibbonIndex. I think I will be able to create this myself. Thank you for pointing me in the right direction.

Regarding Query 2

I see your solutions creates a behavior that imitates the behavior I would like, but your solution does not take into account the chosen style of the ShellView  (in my case Blend). Does Blend have a default it have a default Style for MouseOver, MouseDown etc and if so, can I apply it to the textblock in a way that when I change the application Template, it will inherit the settings from the new style.

Kind regards,

Niels

[NM van Strien]

Regarding Query 2:

Perhaps it is easier to use a button. However when I try to set the button label I do not see "z" but some icon.

xml:

                <syncfusion:ButtonAdv x:Name="IndexZ"
                                      Label="z"
                                      Grid.Row="26"
                                      Margin="2 1 2 1"
                                      FontSize="11"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Foreground="White"
                                      Background="Transparent"                                     
                                      BorderThickness="0"/>

Attachment: button_f3afc515.7z

[NM van Strien]

Hi Anirudhan,

I think I am almost there wrt Query 2. Using a button is easier than using a textblock.

I have defined a style in my xaml

    <UserControl.Resources>
        <Style TargetType="syncfusion:ButtonAdv" x:Key="IndexButtonStyle">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="SizeMode" Value="Normal" />
            <Setter Property="Height" Value="18" />
            <Setter Property="Width" Value="41" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="LargeIcon" Value="{x:Null}" />
            <Setter Property="Margin" Value="2 1 2 1" />
            <Setter Property="FontSize" Value="11" />           
        </Style>       
    </UserControl.Resources>

I apply that style to each button in the 123 - Z index.

I see some rounding of the button edges. Is there a property to set the rounding of the button corners to 0? I couldn't find that.

Thanks for your help.

Kind regards,

Niels

Attachment: button_update_6495afac.zip

[Anirudhan Iyyappan]

Hi Niels van Strien, 

Thanks for you update. 

You can achieve this requirement by using the Edit Template. For further details please refer to the below sample. 

Sample: https://www.syncfusion.com/downloads/support/forum/154632/ze/Sample-1521724698.zip 

Regards, 

Anirudhan