如何在.net中实现这个控件

Question

我对 .net 很陌生，我只是想知道如何制作此类 UI？我需要使用哪些控件来制作上述类型的 UI。如果不能，我能知道在 WPF 中是否可以吗？如果可以的话，怎么办？

谢谢

Answer 1

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

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

您可以使用 HeaderedContentControl 并为其设置样式/模板。
将黑色文本标签放入其内容中（也可能是网格）。
然后将其中几个放入网格的行（高度=“自动”）中。

该 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 可用