.net - このコントロールを.netに実装する方法

Question

私は.netを初めて使用しますが、この種のUIを作成する方法を知りたいだけですか？上記の種類のUIを作成するために使用する必要があるコントロールはどれですか。そうでない場合は、WPFで知ることができますか？

ありがとう

Answer 1

あなたの質問はそれほど具体的ではないので、あなたはより詳細を与えるか、より詳細な質問をする必要があります。

暗闇の中でのいくつかのショット（これはあなたが探しているものですか？）

HeaderedContentControlを使用して、スタイル/テンプレートを作成できます。コンテンツに黒いテキストラベルを配置します（おそらくグリッドも）。次に、それらのいくつかをグリッドの行（Height = "auto"）に配置します。

このグリッドは、さらに別のHeaderedContentControlのコンテンツである可能性があり、必要なUIスタイルを持つようにスタイルを設定します。

色あせた青い線については、LinearGradientBrushを使用して作成できます。

編集OKここに行きます。下の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

もちろん、2つのネストされたItemsControlsを使用して実装することもできます。

Answer 4

私はここで同様の例を見つけました、net ready xp style lib s available