如何在列表中动态更改基于按钮值的图标?

Question

我有以下xaml代码:

<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Check In"
Clicked="CheckInFile"/>
<MenuItem Text="Check Out"
Clicked="CheckOutFile"/>
<MenuItem Text="Download"
Clicked="DownloadFile"/>
<MenuItem Text="Upload Local Copy"
Clicked="UploadFile"/>
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="{Binding Path=DriveItem.Name}"
FontSize="Small" />
<Label Grid.Column="1""
FontFamily="Segoe MDL2 Assets" 
Text="{Binding PublicationStatus}"
/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>

和相关的cs代码:

protected override async void OnAppearing()
{
var directoryContents = await App.GraphClient.Sites[siteID].Lists[sharedDocsDriveId]
.Items
.Request()
//.Expand(item => item.DriveItem)
.Expand("driveItem($select=publication,name,id,description,file,webUrl)")
.GetAsync();
SharedDocumentList.ItemsSource = directoryContents.CurrentPage.ToList();
}

对于返回的每个项，它包含有关文件的信息—当前是否已检出。字段为"level";如下所示/

directoryContents.CurrentPage[i].DriveItem.Publication
{Microsoft.Graph.PublicationFacet}
AdditionalData: null
Level: "checkout"
ODataType: null
VersionId: "4.0"

如果Level的值为"checkout"我想用这个来显示锁定的图标:https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font但如果它被"出版"了我想使用解锁图标为例。

是否有一种简单的方法可以在XAML中执行某种IF语句来评估DriveItem.Publication.Level的值，然后显示适当的图标?我开始在我的代码中公开一个名为publicationStatus的新属性，但是……也许这太过分了。我觉得有一种更简单的方法，我没有想到?

编辑1

所以我已经更新了xaml使用datatrigger方法但我得到的错误是属性&;RelativeSource"在类型BindingExtension中没有找到。

<ListView x:Name="SharedDocumentList"
HasUnevenRows="true"
>
<ListView.Resources>
<Style x:Key="PublicationStatus" TargetType="Label">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"
Value="checkout">
<Setter Property="Text" Value="uE701"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"
Value="published">
<Setter Property="Text" Value="uE702"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Check In"
Clicked="CheckInFile"/>
<MenuItem Text="Check Out"
Clicked="CheckOutFile"/>
<MenuItem Text="Download"
Clicked="DownloadFile"/>
<MenuItem Text="Upload Local Copy"
Clicked="UploadFile"/>
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="{Binding Path=DriveItem.Name}"
FontSize="Small" />
<Label Grid.Column="1"
Style="{StaticResource PublicationStatus}"
Tag="{Binding PublicationStatus}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

编辑2这是我使用ValueConverter的尝试。

下面是类背后的部分代码:

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SPDocumentLibraryContentsPage : ContentPage
{
public string IconValue { get; set; }
public SPDocumentLibraryContentsPage()
{
InitializeComponent();
IconValue = "checkout";
//this.DataContext doesn't exist.
}

Xaml页面上的ListView看起来像这样:

& lt; ListView.ItemTemplate>& lt; ViewCell.ContextActions>& lt;/ViewCell.ContextActions>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="{Binding Path=DriveItem.Name}"
FontSize="Small" />

<Label x:Name="testBlock" Grid.Column="2"                                      
Text="{Binding IconValue,Converter={StaticResource IconValueConverter}}" FontFamily="Segoe MDL2 Assets" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

我能够创建IconConverter类没有问题。这里只是一个片段:

namespace GraphTutorial.Models
{
public class IconValueConverter : Xamarin.Forms.IValueConverter
{
}

编辑3

为了得到正确的答案，我做了以下操作:

<Label Grid.Column="0" Text="{Binding Path=DriveItem.Name}" FontSize="Small" />
<Label Grid.Column="1" Text="{Binding Path=DriveItem.Publication.Level,Converter={StaticResource IconValueConverter}}" FontFamily="Segoe MDL2 Assets" />

Answer 1

看起来你的应用程序是一个Xamarin UWP应用程序，而不是一个本地UWP应用程序。

在使用绑定时也可以尝试使用ValueConverter。您需要做的是创建一个ValueConverter类，并创建自己的逻辑，以便将不同的字符串转换为ValueConverter中的不同图标。之后，您只需要将ValueConverter用作绑定中的参数。

这是我在原生UWP应用程序中测试的示例代码。它应该在Xamarin UWP应用程序中工作。您需要将Textblock替换为Label。

后台代码:

public class IconValueConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
string OutputValue ;
string textvalue = value as string;
if (textvalue.Equals("checkout"))
{
OutputValue = "uE701";
}
else if (textvalue.Equals("published"))
{
OutputValue = "uE702";
}
else 
{
OutputValue = "uE703";
}

return OutputValue;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}

主页:

public string IconValue { get; set;}
public MainPage()
{
this.InitializeComponent();
IconValue = "checkout";
this.BindingContext = this;
}

Xaml代码:

<Page.Resources>
<local:IconValueConverter x:Key="IconValueConverter"/>
</Page.Resources>
<Grid>
<TextBlock x:Name="MyTextBlcok" Text="{Binding IconValue,Converter={StaticResource IconValueConverter}}" FontFamily="Segoe MDL2 Assets" />
</Grid>

Answer 2

有一种聪明的方法可以通过Trigger和Tag属性来实现这一点，以避免使用IValueConverter或从Style内部访问父DataContext。

在列表视图或根元素中

<ListView.Resources>
<Style x:Key="PublicationStatus" TargetType="Label">        
<Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
<Style.Triggers>
<Trigger Property="Tag"
Value="checkout">
<Setter Property="Text" Value="uE701"/>
</Trigger>
<Trigger Property="Tag"
Value="published">
<Setter Property="Text" Value="uE702"/>
</Trigger>
</Style.Triggers>
</Style>
</ListView.Resources>

然后在代码中:

<Label Grid.Column="1"
Style="{StaticResource PublicationStatus}"
Tag="{Binding PublicationStatus}" />

你也可以重用一个样式，并把它放在一些ResourceDictionary。

警告。不是测试。