CODEWITHSUNDEEP
wpfmvvmcontextmenu
Adrian
Adrian

Reputation: 395

ContextMenu too-wide WPF

I have built a ContextMenu dynamically using MVVM. The problem is : the content of MenuItems is all in right side ==> too wide ContextMenu. Do you have any ideea which is the problem? Thanks

Here is the code in XAML:

<TreeView.ContextMenu>
            <ContextMenu Name="RightClickMenu" ItemsSource="{Binding Path=SelectedItem.MenuItemsList}">
                <ContextMenu.ItemTemplate >
                    <DataTemplate>
                    <!-- <MenuItem HorizontalAlignment="Left" Header="{Binding Name}" Command="{Binding Command}" -->
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding MyIcon}"  Width="18" Height="18" SnapsToDevicePixels="True" />
                        <MenuItem  Header="{Binding Name}" Command="{Binding Command}" 
                              CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, 
            AncestorType={x:Type TreeView}}, Path=DataContext.SelectedItem}"
                                  />
                            </StackPanel>
                    </DataTemplate>
                </ContextMenu.ItemTemplate>
            </ContextMenu>
        </TreeView.ContextMenu>

It looks like :

enter image description here

I want the ContextMenu to be like this:

enter image description here

The second problem:

enter image description here

Sometimes it works well but sometimes I get these strange things.

------------------------------Solved--------------------------------------------

For Sac1. I have modified your solution by adding x:Shared="False". Check MSDN for x:Shared.

     <Style TargetType="MenuItem" x:Shared="False"> 
                <Setter Property="Icon">
                    <Setter.Value>
                        <Image Source="{Binding Path=MyIcon}" Height="20" Width="20"  >
                        </Image>
                    </Setter.Value>
                </Setter>
                <Setter Property="Header" Value="{Binding Path=Name}"  />
                <Setter Property="Command" Value="{Binding Command}" />
                <Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource FindAncestor, 
                AncestorType={x:Type TreeView}}, Path=DataContext.SelectedItem}" />
            </Style>

For the wrong headers of menu items I had to override the method ToString() in MenuItemViewModel. I don't undestand why I had to override ToString() but it works well now.

public class MenuItemViewModel : BindableBase
{
......
 public string Name
    {
        get
        {
            return model.Name;
        }
        set
        {
            this.model.Name = value;
            OnPropertyChanged("Name");
        }
    }

 public override string ToString()
    {
        return Name;
    }
   ....
  }

Upvotes: 0

Views: 844

Answers (3)

Mitan Shah
Mitan Shah

Reputation: 344

Dont use MenuItem in DataTemplate instead use button with BorderThickness="0" Background="Transparent"

Upvotes: 0

sac1
sac1

Reputation: 1344

DataTemplate of MenuItem is not working as expected. I used Style insted of DataTemplate:

<TreeView.Resources>
    <Style TargetType="MenuItem">
        <Setter Property="Icon" Value="{Binding MyIcon}" />
        <Setter Property="Header" Value="{Binding Name}" />
        <Setter Property="Command" Value="{Binding Command}" />
        <Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource FindAncestor, 
        AncestorType={x:Type TreeView}}, Path=DataContext.SelectedItem}" />
    </Style>
</TreeView.Resources>
<TreeView.ContextMenu>
    <ContextMenu ItemsSource="{Binding Path=SelectedItem.MenuItemsList}" />
</TreeView.ContextMenu>

Upvotes: 1

Michael Mairegger
Michael Mairegger

Reputation: 7301

You should not use a DataTemplate for the ContextMenu. Just use it as provided:

<ContextMenu>
    <MenuItem Command="{Binding Path=Command}"
              Icon="{Binding Path=MyIcon}"
              Header="{Binding Path=Name}"
              InputGetstureText="CTRL+O" />
</ContextMenu>

Upvotes: 0

Related Questions