如何在 .net 中实现此控件

Question

我对.net 很陌生，我只是想知道如何制作这种用户界面？我需要使用哪些控件来制作上述排序的 UI。如果不是，我可以在 WPF 中知道是否有可能？如果可以，如何？..

谢谢

Answer 1

您的问题并不具体，因此您必须提供更多详细信息或提出更详细的问题。

在黑暗中拍摄一些照片（这是您要找的吗？）

您可以使用HeaderedContentControl 并对其进行样式/模板化。 将黑色文本标签放在其内容中（也可能是网格）。 然后将其中几个放在 Grid 的行 (Height="auto") 中。

此 Grid 可以是另一个 HeaderedContentControl 的内容，并对其进行样式设置，使其具有您想要的 UI 样式。

至于渐变的蓝线，可以使用 LinearGradientBrush 制作。

编辑好的，到此为止。下面的 XAML 几乎类似于上面的图像。有一些猜测和假设，因为并不总是很清楚 UI 应该做什么（超链接/按钮？）。代码显示 WPF 非常有能力显示请求的 UI。这可以开发成一个控件，但是因为我希望你会想要添加几种类型的字段/项目/按钮/标签，所以我坚持基本布局。很多东西都可以改进（样式、模板），但这显示了基础知识。

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
UseLayoutRounding="True"
Width="640" Height="480">
<Window.Resources>
    <ControlTemplate x:Key="SubheaderTemplate" TargetType="{x:Type Label}">
        <Border BorderThickness="0,0,0,1">
            <Border.BorderBrush>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Offset="0" Color="#FFAAAAFF"/>
                    <GradientStop Offset="1" Color="#00AAAAFF"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <TextBlock FontWeight="Bold" Margin="10,0,0,0" Text="{TemplateBinding Content}"/>
        </Border>
    </ControlTemplate>
    <Style x:Key="SubheaderStyle" TargetType="{x:Type Label}">
        <Setter Property="Template" Value="{StaticResource ResourceKey=SubheaderTemplate}"/>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Border BorderThickness="1,0,1,1" BorderBrush="Silver" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20" >
    <Grid Width="223">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Rectangle>
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFC4C4C4" Offset="1"/>
                    <GradientStop Color="White"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock Margin="10,5,5,5" FontWeight="Bold" FontSize="13.333" Text="Windows Search Results"/>
        <Label VerticalAlignment="Top" Style="{StaticResource ResourceKey=SubheaderStyle}" Content="Status" Grid.Row="1" />
        <Label VerticalAlignment="Top" Style="{StaticResource ResourceKey=SubheaderStyle}" Content="Deskbar history" Grid.Row="3" />
        <Label VerticalAlignment="Top" Style="{StaticResource ResourceKey=SubheaderStyle}" Content="My Deskbar Shortcuts" Grid.Row="7"  />
        <TextBox Margin="15,5,5,5" Grid.Row="2" Text="Start typing to begin searching."/>
        <TextBlock Margin="15,5,5,5" Grid.Row="4"  Text="!calc" />
        <TextBlock Margin="15,5,5,5" Grid.Row="5"  Text="C:" />
        <TextBlock Margin="15,5,5,5" Grid.Row="6"  Text="=calc" />

        <TextBlock Margin="15,5,5,5" Grid.Row="8"  Text="Click here to learn more about shortcuts" />
        <TextBlock Margin="15,5,5,5" Grid.Row="9"  Text="?help" />
        <TextBlock Margin="15,5,5,5" Grid.Row="10"  Text="?syntax" />
        <TextBlock Margin="15,5,5,5" Grid.Row="11"  Text="!word" />
        <TextBlock Margin="15,5,5,5" Grid.Row="12"  Text="!calc" />
        <TextBlock Margin="15,5,5,5" Grid.Row="13"  Text="!outlook" />

        <Button Margin="0,5,5,5" HorizontalAlignment="Right" Content="x"/>
        <Button Margin="0,5,20,5" HorizontalAlignment="Right" Content="_"/>

    </Grid>
    </Border>
</Grid>

Answer 2

好的。这很粗糙，因为我是通过代码手动加载列表视图。此外，您可能需要稍微调整一下布局。查看您在 Listview.Groups 上的文档。我认为它仅在图标模式下可用。你会想玩这个。并不是说这不是 wpf；这是 Windows 窗体列表视图。但是，我打赌 wpf 版本会做类似的事情，而且可能看起来也更酷！ （我还没有搞砸wpf，但计划在不久的将来......）。

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    Dim Guitars As New List(Of String)
    Dim GuitarPlayers As New List(Of String)

    With Guitars
        .Add("Gibson Les Paul")
        .Add("Fender Stratocaster")
        .Add("Fender Telecaster")
    End With

    With GuitarPlayers
        .Add("Eric Clapton")
        .Add("Jimi Hendrix")
        .Add("Mark Knopfler")
    End With

    Dim lv As ListView = Me.ListView1
    lv.View = View.SmallIcon

    Dim lvGroup As ListViewGroup
    Dim lstItm As ListViewItem

    With lv.Items

        .Clear()
        lvGroup = lv.Groups.Add("GuitarsGroup", "Guitars")
        For Each Str As String In Guitars
            lstItm = .Add(Str)
            lstItm.Name = Str
            lvGroup.Items.Add(lstItm)
        Next

        lvGroup = lv.Groups.Add("GuitarsPlayersGroup", "GuitarPlayers")
        For Each Str As String In GuitarPlayers
            lstItm = .Add(Str)
            lstItm.Name = Str
            lvGroup.Items.Add(lstItm)
        Next

    End With

End Sub

Answer 3

我最终相信在 WPF 中它应该类似于 ItemsControl 与分组：
http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.isgrouping.aspx

当然也可以使用两个嵌套的ItemsControl来实现。

Answer 4

我在 ,net ready xp style lib 中找到了类似的例子here