Question

enter image description here

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

由于

Answer 1

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

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

您可以使用HeaderedContentControl和样式/模板。将黑色文本标签放在其内容中（也可能是网格）。然后将其中几个放入网格的行（Height =“auto”）中。

这个网格可能是另一个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

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

Answer 4

我找到了类似的示例here in net ready xp style lib s available

如何在.net中实现此控件

4 个答案: