私はWPFと初心者を学んでいます。この要件があります。ビュー モデルには timespan オブジェクトがあります。タイムスパンを「1時間ごとに1つの塗りつぶされた円」として表示したいと思います。WPF の方法でこれを行う最適な方法は何でしょうか。ItemsTemplate を試しましたが、これを行う方法が見つかりませんでした。
3 に答える
評価コントロールの作成に関するこの記事を見てください。非常によく似ています。
これに関する唯一の MVVM の問題は、コントロールに表示する必要がある実際の値を収集する方法かもしれません。しかし、コントロールの構築は MVVM とはあまり関係がありません。
行き詰まった場合はお知らせください。具体的な質問をしてみてください。
1 つのオプションは、コードで正しい数の円を生成するカスタム コントロールを作成することですが、主に XAML を使用する場合は、いくつかのオプションがあります。
パネル内で円を生成したい場合は、 を使用しItemsControl
て生成を実行できます。生成されるアイテムは円なので、1 時間ごとの要素を持つビュー モデル プロパティが必要です。これらの要素にはプロパティがなく、単純にタイプObject
:
public ObservableCollection<Object> Items { get; private set; }
コレクション内のオブジェクトの数を更新できます。
Items.Clear();
var item = new Object();
for (var i = 0; i < timeSpan.Hours; i += 1)
Items.Add(item);
簡単なビューは次のとおりです。
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Width="25" Height="25" Fill="Black" StrokeThickness="0" Margin="10"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
パネルを使用して行うのが難しい方法で円をレイアウトしたい場合は、代わりに XAML で 24 個の円を手動でレイアウトできます。次に、値コンバーターを使用して、時間を表すビューモデル プロパティに基づいて各円を表示または非表示にできます。
// Remember to fire INotifyPropertyChanged.PropertyChanged when value changes.
public Int32 Hours { get; private set; }
次に、値コンバーターは数値を可視性に変換します。
class VisibilityConverter : IValueConverter {
public Object Convert(Object value, Type targetType, Object parameter, CultureInfo culture) {
var hours = System.Convert.ToInt32(value);
var visibleBelow = System.Convert.ToInt32(parameter);
// Alternatively use Visibility.Collapsed to completely remove the circle.
return hours <= visibleBelow ? Visibility.Visible : Visibility.Hidden;
}
public Object ConvertBack(Object value, Type targetType, Object parameter, CultureInfo culture) {
throw new NotImplementedException();
}
}
次に、それぞれがの時間を識別するを使用して をプロパティEllipse
にバインドしVisibility
ます。Hours
ConverterParameter
Ellipse
<Ellipse
Visibility="{Binding Hours, Converter={StaticResource VisibilityConverter}, ConverterParameter=3}"/>
これを達成するには多くの方法があります。これは、生の XAML で実行できるものです。
- ビュー
ItemsControl
モデルによって生成されたブール値のコレクションにデータ バインドします。1 時間ごとに 1 つのブール値が表されます。 - 高さと幅が同じで、[色] の境界線を
ItemsControl.ItemTemplate
含むテンプレートに設定します。Ellipse
- が System.Boolean true に等しい場合、アクション / ビヘイビアーを使用しての塗りつぶし
Ellipse
を [色] に設定します。DataContext
このメソッドでは、boolean コレクションのいずれかが変更されるたびに、boolean コレクション全体で raise PropertyChanged を呼び出す必要があります。