1

I encountered an UI issue when developing an app using MAUI flyoutItem. According to the official doc, it looks like I can only define the flyoutItem appearance by setting two columns(https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0): one bind to FlyoutIcon and the other bind to Title.

What if I want to add a third item such as a label for identity/status or a slide button to enable/disable? I expect sth look like this:

[column 0]FlyoutIcon [column 1]Label1 [column 2]Label2/Slide Button

Can you please also show me some sample code for the solution?

Best and Regards

I tried to modify the Grid to add a third column and addition Label but seems not working.
<Shell ...>
...
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.4*,0.4*">
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
                <Label Grid.Column="2"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="End" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
</Shell>
ToolmakerSteve
  • 18,547
  • 14
  • 94
  • 196
Chaoran
  • 11
  • 1

1 Answers1

0

Er, guys. Looks like using Menu Item instead of FlyoutItem will resolve the issue.

Chaoran
  • 11
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 16 '22 at 00:47