How can I conditionally use two different flyout menus in my UserControl in UWp - xaml

Question

I have a UserControl that contains a button, and when the button is clicked, a flyout menu should appear. However, I would like to use different flyout menus depending on a specific condition.
I have created a dependency property in my UserControl that determines which flyout menu to display, and a converter that converts the value of the dependency property to the corresponding flyout menu.
How do I change the value of dependency property from the view

Answer 1

The most direct way to do this is modify the MenuFlyout object in the code behind. You could change the items of the MenuFlyout manually based on the specific condition.
I notice that you are creating in the converter. So want you need to do is to create the MenuFlyoutItems in the converter.
Here is a simple demo which I made. The button's MenuFlyout will change after another button is clicked.
Xaml:
<StackPanel>
<Button x:Name="MyButton" Content="Click" >
<Button.Flyout>
<MenuFlyout x:Name="TestFlyout">
<MenuFlyoutItem Text="Change color" />
</MenuFlyout>
</Button.Flyout>
</Button>
<Button Content="ChangeMenuItem" Click="MyButton_Click"/>
</StackPanel>
Code-behind:
bool testFlag= false;
public MainPage()
{
this.InitializeComponent();
}
private void MyButton_Click(object sender, RoutedEventArgs e)
{
if (testFlag)
{
GenerateItemA();
testFlag = false;
}
else
{
GenerateItemB();
testFlag = true;
}
}
private void GenerateItemA()
{
// remove all the existing items
TestFlyout.Items.Clear();
TestFlyout.Items.Add(new MenuFlyoutItem { Text = "Group A" });
TestFlyout.Items.Add(new MenuFlyoutItem { Text = "Group B" });
TestFlyout.Items.Add(new MenuFlyoutItem { Text = "Group c" });
}
private void GenerateItemB()
{
// remove all the existing items
TestFlyout.Items.Clear();
TestFlyout.Items.Add(new MenuFlyoutItem { Text = "Group 123" });
TestFlyout.Items.Add(new MenuFlyoutItem { Text = "Group 234" });
TestFlyout.Items.Add(new MenuFlyoutItem { Text = "Group 435" });
}