Data Binding Icon & InputGestureText With Separator Support

[Unknown]

Hi,

I went through all the documentation on data binding the MenuAdv control; however none of these guides demonstrates how to data bind the Icon and InputGestureText properties.

I tried using the HierarchicalDataTemplate route as suggested in the guides, however the solution suggested in this guide is not ideal as the Icon is in the same column as the header text whereas the Icon column of the MenuItemAdv that is rendered is empty.

I also tried a ItemContainerStyle, which almost gives me the what I want; but then I lose all theming and get the default gray Windows menu style. This is also the only way I found to bind a IsSeparator property from my ViewModel to a style trigger and change the control template to use the MenuItemSeparator.

What is the recommended way to use the MenuAdv in a MVVM friendly way to bind the Icon and InputGestureText properties with menu separator support while still having the current theme applied?

Basically, I would like to simply bind the appropriate properties while maintaining the themed look and feel.

Please see the attached for examples.

Attachment: TestMenuAdv_a1e93839.7z

[Thirupathi Bala Krishnan]

Hi Andre, 

Thank you for contacting Syncfusion support. 

We have checked your requirement - “To bind the Icon and InputGestureText property with menu separators in MenuAdv control with applied theme”. Currently we are checking the way of possibilities in order to achieve your requirement, we will update the further solution on 13^th July, 2018. 

Regards, 

Thirupathi B. 

[Thirupathi Bala Krishnan]

Hi Andre, 

We have checked your requirement - “To bind the Icon and InputGestureText property with menu separators in MenuAdv control with applied theme’. Based on your requirement, we have modified your sample to meet your actual requirement. In your application, you can merge the ResourceDictionary values based on your visual styles and then bind the visual styles into the ‘ItemContainerStyle’ property of MenuGridAdv control. Now, the applied visual styles does not changed, it maintains the defined visual style (Office2016White). 

Please refer the below code sample. 

#MainWindow.xaml 

 

<Window>  

    <Window.Resources> 

        <ResourceDictionary> 

            <ResourceDictionary.MergedDictionaries> 

                <ResourceDictionary Source="/Syncfusion.Themes.Office2016White.WPF;component/Tools/MenuAdv/MenuAdv.xaml" /> 

            </ResourceDictionary.MergedDictionaries> 

 

            <local:StyleConverter x:Key="StyleConverter"/> 

 

            <Style x:Key="MenuItemAdvCustomStyle" TargetType="syncfusion:MenuItemAdv"> 

                <Setter Property="Header" Value="{Binding Header}" /> 

                <Setter Property="Icon" Value="{Binding Icon}" /> 

                <Setter Property="InputGestureText" Value="{Binding InputGesture}" /> 

                <Setter Property="ItemsSource" Value="{Binding Items}" /> 

 

                <Style.Triggers> 

                    <DataTrigger Binding="{Binding IsSeparator}" Value="True"> 

                        <Setter Property="Template"> 

                            <Setter.Value> 

                                <ControlTemplate> 

                                    <syncfusion:MenuItemSeparator /> 

                                </ControlTemplate> 

                            </Setter.Value> 

                        </Setter> 

                    </DataTrigger> 

                </Style.Triggers> 

            </Style> 

        </ResourceDictionary> 

    </Window.Resources> 

        <syncfusion:MenuAdv x:Name="MenuAdv" BorderThickness="0" ItemsSource="{Binding Items}" ItemContainerStyle="{Binding Path=(sfSkinManager:SfSkinManager.VisualStyle), RelativeSource={RelativeSource AncestorType=Window}, Converter={StaticResource StyleConverter}}"> 

 

        </syncfusion:MenuAdv> 

</Window> 

 

#Converters.cs 

 

    public class StyleConverter : IValueConverter 

    { 

        public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture) 

        { 

            MainWindow window = Application.Current.MainWindow as MainWindow; 

            Style basestyle = new Style(); 

            Style itemcontainerstyle = null; 

 

            if (window != null && window.Resources != null && window.Resources.MergedDictionaries != null && window.Resources.MergedDictionaries.Count > 0) 

            { 

                ResourceDictionary rdic = window.Resources.MergedDictionaries[0] as ResourceDictionary; 

                itemcontainerstyle = window.Resources["MenuItemAdvCustomStyle"] as Style; 

                //Office2016White style 

                basestyle = rdic["MetroMenuItemAdvStyle"] as Style; 

                if (basestyle != null) 

                { 

                    foreach (Setter setter in basestyle.Setters) 

                    { 

                        var isExist = itemcontainerstyle.Setters.ToList().Any(item => (item as Setter).Property.Name == setter.Property.Name); 

                        if (!isExist) 

                            itemcontainerstyle.Setters.Add(setter); 

                    } 

                } 

            } 

            return itemcontainerstyle; 

        } 

 

        public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture) 

        { 

            throw new System.NotImplementedException(); 

        } 

    } 

 

Please find the screenshot and modified sample from the following location: 

http://www.syncfusion.com/downloads/support/forum/138667/ze/Andre_MenuAdv177226380  

Regards, 

Thirupathi B.