xaml - WPF テンプレート カスタム コントロールに変える方法を理解するのに助けが必要です
現在取り組んでいるプロジェクトのカスタム コントロールのレイアウトをデザインしようとしていますが、希望通りの見た目になりました。問題は、機能の観点から、そのようには思えないことです。本当に必要なことのために働くつもりです。以下をウィンドウにドロップして、目的の外観を得ることができます。
<Window x:Class="TestProject.MainWindow"
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"
xmlns:local="clr-namespace:TestProject"
mc:Ignorable="d"
Title="MainWindow" Height="1080" Width="1920">
<StackPanel Margin="15,80,1535.333,85.667">
<Border BorderBrush="#FFD9D9D9" BorderThickness="0,1.5,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="3" Background="#FFF1F1F1">
</StackPanel>
<StackPanel Grid.Column="1" Margin="0,1,20,3" VerticalAlignment="Center">
<TextBlock FontSize="18" FontWeight="SemiBold">Header</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Margin="0,1,10,3" VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Right" FontWeight="SemiBold" FontSize="18">5,400.00</TextBlock>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Margin="0,2,20,2">
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 1</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 2</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 3</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 4</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 5</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Margin="0,2,10,2">
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2"> <StackPanel Grid.Column="1" Grid.Row="1" Margin="0,2,20,2">
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 1</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 2</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 3</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 4</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 5</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Margin="0,2,10,2">
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2"> <DataTemplate DataType="{x:Type local:CostingsListViewModel}"
<ListView>
.....
.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-100.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">5,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-500.00</TextBlock>
</StackPanel>
.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-100.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">5,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-500.00</TextBlock>
</StackPanel>
</Grid>
</Border>
</StackPanel>
</Window>
今、私が苦労している問題は、これをバインディングで使用できるテンプレートにすることです。列ヘッダーにはリストビューとグリッド ビューを使用するべきだったのではないかと考えていました。したがって、ここでもアドバイスをいただければ幸いです。
上記には問題と思われる点がいくつかあります。主に、コードを実行するために各項目行をクリックする必要があることです。そのため、次のようにすべきだったと感じています。代わりにグリッド ビュー オプションを使用します。しかし、私がグリッド ビューを使用しなかった 1 つの理由は、主に、ここで列を使用して同じレイアウトを行う方法が見つからなかったからです。
要約します
グリッド ビューを使用するべきでした。そうであれば、中央の列のスケーリングで同じ結果を得るにはどうすればよいですか? これをスタイル設定できるカスタム コントロールに変換する方法を学習するための最良の方法です。主に説明や学ぶためのリソースを探しています。編集:
フォローしている人、または興味がある人のために、私が苦労しているのは次のセクションです。データ バインディングからこれを実行し、このように見えるようにテンプレートを制御するにはどうすればよいでしょうか?バインディング部分については理解しました。これは、次のコードが示すのと同じ方法でデータを制御するための実際のテンプレートです。
<DataTemplate DataType="{x:Type local:CostingsListViewModel}"
<local:CostingsListView/>
マークアップに変更可能な部分はありますか? StackPanel 全体を UserControl に配置して、複数のウィンドウや他のビューで再利用できます。
– mm82020 年 9 月 3 日 20:32
@mm8 そうですね、これをカスタム コントロールに変えたいと思っていますが、重要なのは、私が間違っている場合は修正してください。問題は、これを行う 2 つのスタック パネルです。データの e 列。何を見ても、テンプレートとして機能すると考えられるものに還元することはできません。
– アンドリュー・スコット2020 年 9 月 4 日 3:53
------------------------
カスタム コントロールを使用する理由は、テーマを設定するために完全に再テンプレート化するためです。これらはユーザー コントロールやテンプレートよりも複雑なので、テーマ機能が必要ない場合は、ユーザー コントロールまたはテンプレートを使用することをお勧めします。
リストビューはあなたが探しているものを実行するようです。
2 番目の列の前景をバインドするブラシを公開する行ビューモデルが必要になります。
そしてそれ列は次のようになります:
ForeBrush はパブリックなソリッドカラーブラシです。
ブラシはおそらくビュー責任であるため、代わりに列挙型などを使用できます。そしてそれをブラシに変換するコンバーター。
そのマークアップ全体をデータテンプレートに変換し、データをビューモデルに変換できます。そのビューモデルのタイプを使用して、ビューモデルに一致するデータタイプを介してそれを UI にテンプレート化します。
1008611または、UserControl に置くこともできます
10086112
フィードバックはありがたいですが、データ テンプレートのテンプレート化が必要なセクションで迷っているか、行き詰まっています。これが複雑になりすぎている可能性があります。しかし、私の質問に示されているように、スタック パネルを作成するアプローチを取得する方法がわかりません。
– アンドリュー・スコット2020 年 9 月 6 日 19:40
リストビューには、アイテムプレゼンターとしてスタックパネルがあります。リストビューの場合、リストビュー内にヘッダーを持つ 2 つの列が存在します。
– アンディ202 年 9 月 7 日0 15:26