C#WPF，如何制作带有删除按钮的标签？
我试图在我的程序中创建一个文件附件功能，我有两种类型的附件（个人/专业文档）。下图 我现在想做的是，让上传的文件以一个垂直列表（在每个groupbox的标签和按钮下方）的形式显示为一个带有删除按钮的标签，我不知道这个函数叫什么。我想要一些像关键字/标签功能（如stackoverflow，youtube…）下面的图片。 比如： 驾驶执照[X] 护照[X] 签证[X] 因为用户可以快速查看他上传的文件，如果他出错，可以快速删除文件C#WPF，如何制作带有删除按钮的标签？,c#,wpf,user-interface,C#,Wpf,User Interface,我试图在我的程序中创建一个文件附件功能，我有两种类型的附件（个人/专业文档）。下图 我现在想做的是，让上传的文件以一个垂直列表（在每个groupbox的标签和按钮下方）的形式显示为一个带有删除按钮的标签，我不知道这个函数叫什么。我想要一些像关键字/标签功能（如stackoverflow，youtube…）下面的图片。 比如： 驾驶执照[X] 护照[X] 签证[X] 因为用户可以快速查看他上传的文件，如果他出错，可以快速删除文件 到目前为止，我一直在尝试将stackpanel分成两列，一边是文
到目前为止，我一直在尝试将stackpanel分成两列，一边是文本，另一边是按钮，但我没有得到我想要的结果。问题是，我甚至不知道这个函数叫什么，我肯定有一些教程在那里，但它很难搜索一些你不知道的名字 将ListView与以下样式一起使用：
<Style x:Key="ListViewPlate" TargetType="{x:Type ListView}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="ListViewPlateItem">
<WrapPanel>
<Border Background="Black" />
<Border BorderBrush="Goldenrod" BorderThickness="2">
<TextBlock HorizontalAlignment="Center" Text="{Binding Name}" VerticalAlignment="Center" />
</Border>
<Border BorderBrush="Goldenrod" BorderThickness="2">
<Button Command="{Binding ElementName = ListViewElement, Path = DataContext.Command"} CommandParameter={"Binding"}">
<Button.Background>
<ImageBrush ImageSource="yourImage.png" TitleMode="None"/>
</Button.Background>
</Button>
</Border>
</WrapPanel>
</DataTemplate>
假设您有某种类型的带有数据绑定的视图模型，这可以非常简单。您可以对上传的项目进行可观察收集。这可能只是一个包含标识符和显示名称的简单类：
public class UploadedFileInfo
{
public int Id { get; set; }
public string DisplayName { get; set; }
}
在视图模型中：
ObservableCollection<UploadedFileInfo> UploadedFiles { get; set; }
public ICommand DeleteFile { get; private set;}
这需要视图模型中的命令：
ObservableCollection<UploadedFileInfo> UploadedFiles { get; set; }
public ICommand DeleteFile { get; private set;}
视图中的模型构造函数：
DeleteFile = new RelayCommand<int>((fileIdToDelete) => deleteFile(fileIdToDelete))
应该是
<Button Command="{Binding Path=DataContext.DeleteFile, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding Id}" />
它将在主窗口的DataContext
上查找ICommand
参数这里是看起来像
<Button Command="{Binding DeleteFile}" CommandParameter="{Binding Id}" />
Xaml代码
<UserControl x:Class="ButtonLikeInSO.SpecialTextPresenterWithButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="150" x:Name="This">
<UserControl.Resources>
<SolidColorBrush x:Key="GrayButtonBackGround" Color="Gainsboro"/>
<SolidColorBrush x:Key="RedButtonBackground" Color="Tomato"/>
<Style x:Key="ChangeContentOnMouseOverWithAnimationWhenPressed" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Background" Value="{StaticResource GrayButtonBackGround}"/>
<Setter Property="Foreground" Value="Black"></Setter>
<Setter Property="ToolTip" Value="Delete Uploading"/>
<Setter Property="ToolTipService.Placement" Value="Top"/>
<Setter Property="Opacity" Value="0.8"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5 0.5" Margin="2">
<Grid.RenderTransform>
<ScaleTransform></ScaleTransform>
</Grid.RenderTransform>
<Ellipse x:Name="MyBorder" Fill="{TemplateBinding Background}" Stroke="Gray" StrokeThickness="1"/>
<Ellipse x:Name="RectangleVisibleOnMouseMove" Opacity="0" Fill="{StaticResource RedButtonBackground}" Stroke="Black" StrokeThickness="1"/>
<Path x:Name="ButtonPath"
Margin="5"
Stroke="{TemplateBinding Foreground}"
StrokeThickness="1.5"
StrokeStartLineCap="Square"
StrokeEndLineCap="Square"
Stretch="Uniform"
VerticalAlignment="Center"
HorizontalAlignment="Center" Data="M0,0 L1,1 M0,1 L1,0">
</Path>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnMouseMove"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnMouseMove"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.PreviewMouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="0.8" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="0.8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.PreviewMouseUp">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.8" />
<EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.8" />
<EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="Foreground" Value="White"></Setter>
</Trigger>
<Trigger Property="IsPressed" Value="False">
<Setter Property="Foreground" Value="Black"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1.0"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="TextWithDeleteButton">
<Border BorderThickness="1" BorderBrush="Gainsboro">
<Grid Background="{Binding ElementName=This, Path=Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding ElementName=This, Path=Text}" MaxWidth="150" Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="WordEllipsis" />
<Button Grid.Column="1" Margin="0" Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center" Command="{Binding ElementName=This, Path=DeleteCommand}" Style="{StaticResource ChangeContentOnMouseOverWithAnimationWhenPressed}"></Button>
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ContentControl ContentTemplate="{StaticResource TextWithDeleteButton}"></ContentControl>
</Grid>
使用
<!--you can use binding to DeleteCommand and Text they are dependancy properties-->
<buttonLikeInSo:SpecialTextPresenterWithButton Background="Aquamarine" DeleteCommand="{Binding DeleteCommand}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="20" Text="LoooooooooooongFileName"/>
您想在何处使用此控件？@请在我的2个分组框中进行操作。@RasmusPaulsen请解释您的问题出在何处？您是被ItemsControl或Label with按钮阻止的？只有这么多控件可供选择。没有魔法搜索。谢谢你弗拉基米尔，我会努力做到的！如果对我有用的话，我会告诉你的。我还没那么有经验，我才上第二学期，也许我吃得太多了。试着这样做，万一有什么问题，把它们写在评论里。我会尽力帮忙的
<!--you can use binding to DeleteCommand and Text they are dependancy properties-->
<buttonLikeInSo:SpecialTextPresenterWithButton Background="Aquamarine" DeleteCommand="{Binding DeleteCommand}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="20" Text="LoooooooooooongFileName"/>