UWP 滑动控件 - 根据条件列出项目
UWP Swipe Control - List Items based on condition
我有一个列表视图,该列表视图的数据模板在该滑动控件中有一个 Swipe Control 和一个文本块。现在,Swipe 控件的 Right Items 中有 3 个项目,说:
1.添加
2.编辑
3.删除
我想根据条件显示正确的项目。如果文本块没有字符串,则向右滑动时,仅显示 "Add"。如果文本块中存在字符串,则在滑动时显示其他 2.
有什么方法可以在 UWP 中使用滑动控件实现这一点吗?
您可以使用绑定来根据绑定到 Textblock
的 Text
属性 的模型内容更改 SwipeControl 的滑动项目数。
这里是澄清它的示例:
在App.xaml中添加SwipeItems
资源,
<Application.Resources>
<SymbolIconSource x:Key="AddIcon" Symbol="Add"/>
<SymbolIconSource x:Key="EditIcon" Symbol="Edit"/>
<SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>
<SwipeItems x:Key="ThreeItems" Mode="Reveal">
<SwipeItem Text="Edit" IconSource="{StaticResource EditIcon}"/>
<SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"/>
<SwipeItem Text="Add" IconSource="{StaticResource AddIcon}"/>
</SwipeItems>
<SwipeItems x:Key="OneItem" Mode="Reveal">
<SwipeItem Text="Add" IconSource="{StaticResource AddIcon}"/>
</SwipeItems>
</Application.Resources>
这是绑定到您的 ListView 项目的 Model
class:
public class Model
{
public string Content { get; set; }
public SwipeItems Swips
{
get
{
if (string.IsNullOrEmpty(Content))
{
return (SwipeItems)Application.Current.Resources["OneItem"];
}
else
{
return (SwipeItems)Application.Current.Resources["ThreeItems"];
}
}
}
}
在MainPage.xaml中,有一个ListView,
<ListView x:Name="sampleList" ItemsSource="{x:Bind ListSource}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Model">
<SwipeControl x:Name="ListViewSwipeContainer"
LeftItems="{x:Bind Swips}"
Height="60">
<StackPanel Orientation="Vertical">
<TextBlock Text="{x:Bind Content}" FontSize="18"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Text Item details" FontSize="12"/>
</StackPanel>
</StackPanel>
</SwipeControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
这是 MainPage.xaml.cs,
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
ListSource = new ObservableCollection<Model>();
ListSource.Add(new Model { Content = "first" });
ListSource.Add(new Model { });
ListSource.Add(new Model { Content = "Second" });
ListSource.Add(new Model { Content = "Third" });
}
public ObservableCollection<Model> ListSource;
}
另外一种方式,也可以通过ListView的ItemTemplateSelector property to reference different ListView ItemTemplate. You need to implement your own DataTemplateSelector到return对应的DataTemplate
,根据Model的content是null还是empty来实现这个效果
我有一个列表视图,该列表视图的数据模板在该滑动控件中有一个 Swipe Control 和一个文本块。现在,Swipe 控件的 Right Items 中有 3 个项目,说: 1.添加 2.编辑 3.删除
我想根据条件显示正确的项目。如果文本块没有字符串,则向右滑动时,仅显示 "Add"。如果文本块中存在字符串,则在滑动时显示其他 2.
有什么方法可以在 UWP 中使用滑动控件实现这一点吗?
您可以使用绑定来根据绑定到 Textblock
的 Text
属性 的模型内容更改 SwipeControl 的滑动项目数。
这里是澄清它的示例:
在App.xaml中添加SwipeItems
资源,
<Application.Resources>
<SymbolIconSource x:Key="AddIcon" Symbol="Add"/>
<SymbolIconSource x:Key="EditIcon" Symbol="Edit"/>
<SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>
<SwipeItems x:Key="ThreeItems" Mode="Reveal">
<SwipeItem Text="Edit" IconSource="{StaticResource EditIcon}"/>
<SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"/>
<SwipeItem Text="Add" IconSource="{StaticResource AddIcon}"/>
</SwipeItems>
<SwipeItems x:Key="OneItem" Mode="Reveal">
<SwipeItem Text="Add" IconSource="{StaticResource AddIcon}"/>
</SwipeItems>
</Application.Resources>
这是绑定到您的 ListView 项目的 Model
class:
public class Model
{
public string Content { get; set; }
public SwipeItems Swips
{
get
{
if (string.IsNullOrEmpty(Content))
{
return (SwipeItems)Application.Current.Resources["OneItem"];
}
else
{
return (SwipeItems)Application.Current.Resources["ThreeItems"];
}
}
}
}
在MainPage.xaml中,有一个ListView,
<ListView x:Name="sampleList" ItemsSource="{x:Bind ListSource}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Model">
<SwipeControl x:Name="ListViewSwipeContainer"
LeftItems="{x:Bind Swips}"
Height="60">
<StackPanel Orientation="Vertical">
<TextBlock Text="{x:Bind Content}" FontSize="18"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Text Item details" FontSize="12"/>
</StackPanel>
</StackPanel>
</SwipeControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
这是 MainPage.xaml.cs,
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
ListSource = new ObservableCollection<Model>();
ListSource.Add(new Model { Content = "first" });
ListSource.Add(new Model { });
ListSource.Add(new Model { Content = "Second" });
ListSource.Add(new Model { Content = "Third" });
}
public ObservableCollection<Model> ListSource;
}
另外一种方式,也可以通过ListView的ItemTemplateSelector property to reference different ListView ItemTemplate. You need to implement your own DataTemplateSelector到return对应的DataTemplate
,根据Model的content是null还是empty来实现这个效果