I want to display in my flyout each time an icon and then the text. What I did is that I took the code from the
and this is what I have
<Shell x:Class="dateCalculator.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:dateCalculator"
xmlns:controls="clr-namespace:Xaminals.Controls"
Shell.FlyoutBehavior="Flyout"
FlyoutHeaderBehavior="Fixed"
FlyoutVerticalScrollMode="Auto"
FlyoutWidth="{OnPlatform WinUI='525',MacCatalyst='525'}"
FlyoutBackgroundColor="{AppThemeBinding Light={StaticResource LightObject}, Dark={StaticResource DarkGrey}}"
FlyoutIsPresented="{Binding IsFlyoutOpen}">
<Shell.ItemTemplate>
<DataTemplate>
<Grid Padding="10,10,0,10">
<Label Grid.Column="1"
Text="{Binding Title}"
FontSize="Small"
FontAttributes="Bold"
VerticalOptions="Center"/>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
<FlyoutItem Title="Calculette" Icon="menu_black.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:Basic}"/>
</Tab>
</FlyoutItem>
<FlyoutItem
Title="Calculer différence de date">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:date}"/>
</Tab>
</FlyoutItem>
<FlyoutItem
Title="Convertir des distance">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:ConvDistance}"/>
</Tab>
</FlyoutItem>
</Shell>
and this is what it gives me
and here is the image if it can help you
CodePudding user response:
This is the problem for the icons , try to remove it.
<Shell.ItemTemplate>
<DataTemplate>
<Grid Padding="10,10,0,10">
<Label Grid.Column="1"
Text="{Binding Title}"
FontSize="Small"
FontAttributes="Bold"
VerticalOptions="Center"/>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
This is working
<FlyoutItem Title="Calculette" Icon="icon_about.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem
Title="Calculer différence de date" Icon="icon_feed.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem
Title="Convertir des distance" Icon="icon_about.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
</Tab>
</FlyoutItem>