我注意到，當(dāng)我自定義彈出項(xiàng)目外觀（如文檔中所述）時(shí)，當(dāng)前的 FlyoutItem 不再被標(biāo)記。從文檔中截取代碼以更改項(xiàng)目外觀：<Shell ...> ... <Shell.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.2*" /> <ColumnDefinition Width="0.8*" /> </Grid.ColumnDefinitions> <Image Source="{Binding FlyoutIcon}" Margin="5" HeightRequest="45" /> <Label Grid.Column="1" Text="{Binding Title}" FontAttributes="Italic" VerticalTextAlignment="Center" /> </Grid> </DataTemplate> </Shell.ItemTemplate></Shell>Shell.ItemTemplate 之前的屏幕截圖Shell.ItemTemplate 之后的屏幕截圖人們會(huì)認(rèn)為一定還存在某種外殼。當(dāng)前/活動(dòng)/選定的ItemTemplate 自定義，但我找不到它。有什么想法可以自定義當(dāng)前的 shell 項(xiàng)目外觀，或者至少使默認(rèn)項(xiàng)目標(biāo)記與 Shell.ItemTemplate 一起使用嗎？
2 回答
慕尼黑5688855
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超2個(gè)贊
不幸的是。從Xamarin.Forms - Xaminals示例來看，也出現(xiàn)了這種現(xiàn)象。這應(yīng)該是當(dāng)前版本的 XF 中 Shell FlyoutItem 的限制。
<Shell.ItemTemplate>
? ? <DataTemplate >
? ? ? ? <Grid>
? ? ? ? ? ? <Grid.ColumnDefinitions>
? ? ? ? ? ? ? ? <ColumnDefinition Width="0.2*" />
? ? ? ? ? ? ? ? <ColumnDefinition Width="0.8*" />
? ? ? ? ? ? </Grid.ColumnDefinitions>
? ? ? ? ? ? <Image Source="{Binding FlyoutIcon}"
? ? ? ? ? ? ? ? Margin="5"
? ? ? ? ? ? ? ? HeightRequest="45" />
? ? ? ? ? ? <Label Grid.Column="1"
? ? ? ? ? ? ? ? Text="{Binding Title}"
? ? ? ? ? ? ? ? FontAttributes="Italic"
? ? ? ? ? ? ? ? VerticalTextAlignment="Center" />
? ? ? ? </Grid>
? ? </DataTemplate>
</Shell.ItemTemplate>
如果不使用Shell.ItemTemplate，則 selectitem 被標(biāo)記：
否則 selectitem 未標(biāo)記：
=====================================更新============== =================
解決方案：
如果給模板添加樣式，選擇后可以保持選中狀態(tài)。
Shell.Resources：添加FoutItemStyle。
<Style x:Key="FloutItemStyle" TargetType="Grid">
? ? <Setter Property="VisualStateManager.VisualStateGroups">
? ? ? ? <VisualStateGroupList>
? ? ? ? ? ? <VisualStateGroup x:Name="CommonStates">
? ? ? ? ? ? ? ? <VisualState x:Name="Normal" />
? ? ? ? ? ? ? ? <VisualState x:Name="Selected">
? ? ? ? ? ? ? ? ? ? <VisualState.Setters>
? ? ? ? ? ? ? ? ? ? ? ? <Setter Property="BackgroundColor" Value="Accent"/>
? ? ? ? ? ? ? ? ? ? </VisualState.Setters>
? ? ? ? ? ? ? ? </VisualState>
? ? ? ? ? ? </VisualStateGroup>
? ? ? ? </VisualStateGroupList>
? ? </Setter>
</Style>
在Shell.ItemTemplate中使用如下：
<Shell.ItemTemplate>
? ? <DataTemplate >
? ? ? ? <Grid Style="{StaticResource FloutItemStyle}">
? ? ? ? ? ? <Grid.ColumnDefinitions>
? ? ? ? ? ? ? ? <ColumnDefinition Width="0.2*" />
? ? ? ? ? ? ? ? <ColumnDefinition Width="0.8*" />
? ? ? ? ? ? </Grid.ColumnDefinitions>
? ? ? ? ? ? <Image Source="{Binding FlyoutIcon}"
? ? ? ? Margin="5"
? ? ? ? HeightRequest="45" />
? ? ? ? ? ? <Label Grid.Column="1"
? ? ? ? Text="{Binding Title}"
? ? ? ? FontAttributes="Italic"
? ? ? ? VerticalTextAlignment="Center" />
? ? ? ? </Grid>
? ? </DataTemplate>
</Shell.ItemTemplate>
最后展示一下效果：
幕布斯6054654
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊
您可以使用綁定屬性。創(chuàng)建自定義網(wǎng)格
public class ShellItemGrid : Grid
{
public static readonly BindableProperty SelectedColorProperty = BindableProperty.Create("SelectedColor", typeof(Color), typeof(ShellItemGrid),Color.Transparent);
public Color SelectedColor
{
get { return (Color)GetValue(SelectedColorProperty); }
set { SetValue(SelectedColorProperty, value); }
}
}
定義網(wǎng)格的樣式
<Shell.Resources>
<Style x:Key="FlyoutItemStyle" TargetType="controls:ShellItemGrid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="SelectedColor" Value="Red"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="SelectedColor" Value="White"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
定義項(xiàng)目模板并將Label的TextColor綁定到網(wǎng)格的SelectedColor
<Shell.ItemTemplate>
<DataTemplate>
<controls:ShellItemGrid x:Name="mGrid" Style="{StaticResource FlyoutItemStyle}" >
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
Margin="20,10,0,10"
Text="{Binding Title}"
TextColor="{Binding Source={x:Reference mGrid},Path=SelectedColor}"
FontSize="18" />
</controls:ShellItemGrid >
</DataTemplate>
</Shell.ItemTemplate>
- 2 回答
- 0 關(guān)注
- 147 瀏覽
添加回答
舉報(bào)
0/150
提交
取消