Listview项目内的UWP按钮 [英] UWP buttons inside Listview items
问题描述
我正在开发我的第一个UWP应用，我想创建一个的UI.对于每个列表项(项目)，将有一组按钮.对于某些列表项(项目)，某些按钮有时会被禁用.因此，我需要在这些列表项(项目)中禁用和更改此类按钮的图像.
I'm working on my first UWP app and I want create a UI like this . For each list item (project) there'll be a set of buttons. For certain list items(projects) some of these buttons will be disabled some times. So I need to disable and change the image for such button in those list items(projects).
我试图使用这样的列表视图来实现它.但是我不确定如何根据情况启用/禁用某些按钮.
I tried to implement it using a list view like this. But I am not sure how I can enable/disable some of those buttons depending on the condition.
试图添加DataContextChanged事件并尝试访问那里的按钮.但不确定如何访问这些按钮.
Tried adding a DataContextChanged event and trying to access the buttons there. But not sure how I can access those buttons.
请让我知道以下方法是否正确，或者是否有更好的方法来完成上图中我要实现的目标.
Please let me know whether the following approach is correct or is there a better way to do what I am trying to achieve in the above image.
<ListView x:Name="stepsListView" Margin="10,0,0,0" RequestedTheme="Dark" FontSize="24" Background="{StaticResource procedure_app_white}" Foreground="Black" BorderThickness="1.5" BorderBrush="Transparent" ItemsSource="{Binding projectList}" HorizontalAlignment="Left">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<!-- Item -->
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,1" BorderBrush="#c0c0c0">
<Grid Width="auto" HorizontalAlignment="Stretch" DataContextChanged="Grid_DataContextChanged" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" FontSize="30" Grid.Row="0" Grid.ColumnSpan="7" Text="{Binding projectName}" Foreground="{StaticResource procedure_app_orange_text }" />
<Button x:Name="warningButton" Width="40" Height="40" Grid.Column="1" Grid.Row="1" Tag="{Binding projectId}" Click="warningButtonClick" Foreground="{StaticResource procedure_app_orange_text }">
<Button.Background>
<ImageBrush ImageSource="Asset/step_ncwr.png">
</ImageBrush>
</Button.Background>
</Button>
<Button x:Name="commentButton" Width="40" Height="40" Grid.Column="2" Grid.Row="1" Tag="{Binding projectId}" Click="CommentButtonClick" Foreground="{StaticResource procedure_app_orange_text }" IsTapEnabled="True">
<Button.Background>
<ImageBrush ImageSource="Asset/step_comment.png">
</ImageBrush>
</Button.Background>
</Button>
<Button x:Name="imageButton" Width="40" Height="40" Grid.Column="3" Grid.Row="1" Tag="{Binding projectId}" Click="ImageButtonClick" Foreground="{StaticResource procedure_app_orange_text }">
<Button.Background>
<ImageBrush ImageSource="Asset/step_image.png">
</ImageBrush>
</Button.Background>
</Button>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
推荐答案
答案是变量取决于您所使用的结构，因此我将作一些假设并加以讨论.
The answer is to variable dependent on what structure you've gone with so I am going to make some assumptions and roll with it.
首先，我假设您的 ViewModel 具有一个名为 ProjectList 的 ObservableCollection ，并且已完成此 ProjectList ProjectModel 的
First I am going to assume your ViewModel has an ObservableCollection called ProjectList and that this ProjectList is made up of ProjectModel's
ProjectModel.cs
ProjectModel.cs
public class ProjectModel : INotifyPropertyChanged{
private bool _isNcwrEnabled;
public bool IsNcwrEnabled{
get{ return _isNcwrEnabled; }
set{ _isNcwrEnabled = value; OnPropertyChanged("IsNcwrEnabled"); }
}
private bool _isCommentEnabled;
public bool IsCommentEnabled{
get{ return _isCommentEnabled; }
set{ _isCommentEnabled= value; OnPropertyChanged("IsCommentEnabled"); }
}
private bool _isImageEnabled;
public bool IsImageEnabled{
get{ return _isImageEnabled; }
set{ _isImageEnabled= value; OnPropertyChanged("IsImageEnabled"); }
}
public void OnPropertyChanged(String prop)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
在您的 ViewModel 中，您应该拥有
ObservableCollection<ProjectModel> ProjectList {get; private set; }
最后在您的 View
<Button IsEnabled="{Binding IsNcwrEnabled}" x:Name="warningButton" Width="40" Height="40" Grid.Column="1"
Grid.Row="1" Tag="{Binding projectId}" Click="warningButtonClick"
Foreground="{StaticResource procedure_app_orange_text }">
<Button.Background>
<ImageBrush ImageSource="Asset/step_ncwr.png"/>
</Button.Background>
</Button>
<Button IsEnabled="{Binding IsCommentEnabled}" x:Name="commentButton" Width="40" Height="40" Grid.Column="2"
Grid.Row="1" Tag="{Binding projectId}" Click="CommentButtonClick"
Foreground="{StaticResource procedure_app_orange_text }" IsTapEnabled="True">
<Button.Background>
<ImageBrush ImageSource="Asset/step_comment.png"/>
</Button.Background>
</Button>
<Button IsEnabled="{Binding IsImageEnabled}" x:Name="imageButton" Width="40" Height="40" Grid.Column="3"
Grid.Row="1" Tag="{Binding projectId}" Click="ImageButtonClick"
Foreground="{StaticResource procedure_app_orange_text }">
<Button.Background>
<ImageBrush ImageSource="Asset/step_image.png"/>
</Button.Background>
</Button>
更改摘要
-
ListView绑定到的集合中的模型需要包含Buttons绑定到的启用属性 - 在您的
View中，将您的Buttons绑定到新属性
- The models in the collection that your
ListViewis bound to needs to contain enabled properties for yourButtonsto bind to - In your
View, bind yourButtonsto your new properties
这篇关于Listview项目内的UWP按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
