How to add a component to Context menu item which will create on click?

Question

I have context manu:

<ContextMenu x:Key="MyContextMenu">
<MenuItem Header="ChangeColor">
</MenuItem>

I need to add the Color Picker at the menu item (ChangeColor) and after click on it want the color picker shows up. How can i do it? Thanks.

Answer 1

If you are using MVVM add a Command to the ViewModel and bind your MenuItem to that command which will be triggered on click. Then Popup a dialog with your colorpicker in it. Catch your DialogResult and handle appropriate on this.

Here's an example of how you could do this

MainViewModel

public class MainViewModel
{
    private ColorPickerWindow _colorPicker;


    public MainViewModel()
    {
        ShowColorPicker = new DelegateCommand(ShowColorPickerExecute, () => true);
        Ok = new DelegateCommand(OkExecuted, () => true);
        Ok = new DelegateCommand(CancelExecuted, () => true);

        // Create windows instance and set the DataContext to MainViewModel
        _colorPicker = new ColorPickerWindow();
        _colorPicker.DataContext = this;
    }


    public Color Color { get; set; }

    public ICommand ShowColorPicker { get; set; }

    public ICommand Ok { get; set; }
    public ICommand Cancel { get; set; }

    private void CancelExecuted()
    {
        _colorPicker.DialogResult = false;
        _colorPicker.Close();
    }

    private void OkExecuted()
    {
        _colorPicker.DialogResult = true;
        _colorPicker.Close();
    }

    private void ShowColorPickerExecute()
    {
        //Show the ColorPickerWindow
        if (_colorPicker.ShowDialog().GetValueOrDefault(false))
        {
            // Show which color is picked or do whatever you want
            MessageBox.Show(Color.ToString());
        }
        else
        {
            MessageBox.Show(Color.ToString());
        }
    }
}

MainWindow (XAML)

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525"
    >
<Window.ContextMenu>
    <ContextMenu>
        <MenuItem Command="{Binding ShowColorPicker}" Header="Choose color"/>
    </ContextMenu>
</Window.ContextMenu>
<Grid>


</Grid>

And last but not least the ColorPickerWindow (XAML)

<Window x:Class="WpfApplication2.ColorPickerWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    Title="Choose color" Height="300" Width="300">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <dxe:ColorChooser Color="{Binding Color}"></dxe:ColorChooser>
    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right" Margin="10">
        <Button Content="OK" Width="75" IsDefault="True" Command="{Binding Ok}"/>
        <Button Content="Cancel" Width="75" IsCancel="True" Command="{Binding Cancel}"/>
    </StackPanel>
</Grid>

I Wrote this mostly out of my head so i'm not sure it will work did not test it.

Do not forget to set the DataContext of the MainWindow to MainViewModel

Answer 2

What you can do is:

<ContextMenu>
    <MenuItem Header="ChangeColor" Click="ChangeColor_Click"/>    
</ContextMenu>

And in your CodeBehind generated method, it generates automatically with Click="ChangeColor_Click".:

private void ChangeColor_Click(object sender, RoutedEventArgs e)
    {
        // Your logic for ChangeColor
    }

Hope helps. Greetings!

UPDATE:

Sorry for responding so late.

You must add the Coding4Fun toolkit to your solution.

after in your MainPage.xaml add this statment:

xmlns:c4fToolkit="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls"

And add this lines to your " LayoutRoot "

<c4fToolkit:ColorPicker x:Name="colorpicker ColorChanged="picker_ColorChanged"/>

the ColorChanged method what you want is:

private void picker_ColorChanged(object sender, Color color)
    {
        // As Color
        Color nwColor = color;
        // As SolidColorBrush
        SolidColorBrush nwColor1 = new SolidColorBrush(color);
    }

You can make this Color global an use it in all your solution.

PD: For the good practice and best solution give you already Jordy van Eijk You always think to implement MVVM.

Greetings!