以WPF MVVM方式動態創建圈子

我正在學習WPF和新手。我有這個要求。在視圖模型中，我有一個時間跨度對象。我想將時間範圍顯示爲「每小時一個實心圓」。什麼是以WPF方式做到這一點的最佳方式。我嘗試了ItemsTemplate，但無法找到一種方法來做到這一點。以WPF MVVM方式動態創建圈子

來源

2013-09-26 ferosekhanj

看看這個article about creating a Rating Control它會非常相似。

關於此問題的唯一MVVM事情可能是如何收集應顯示在控件中的實際值。但是構建一個控件與MVVM沒有多大關係。

讓我們知道你是否陷入困境並嘗試提出具體問題。

來源

2013-09-26 06:47:06

是的，這是在我心中最後一個，如果我不發現任何東西。我正在尋找一個像集合+ ItemsControl的解決方案。我唯一的問題是我沒有一個集合，但在這裏有一個屬性，並且必須生成一個對象列表。無論如何感謝您的答案。 – ferosekhanj

如果你只有一個屬性，你爲什麼要尋找一個集合/ itemsControl？您可以根據需要輕鬆生成/添加儘可能多的圈子。這不是收藏品。來自我以前的UI開發經驗的 –

我同意自定義控件解決了這個問題。由於我是一個新手，我只是在探索WPF來找到一種可以通過數據綁定來聲明的方法。 – ferosekhanj

一種選擇是創建自定義控件，該控件將生成以糾正代碼中的圓圈數量，但如果您更願意主要使用XAML，則有幾個選項。

如果要在面板內生成圓圈，可以使用ItemsControl執行生成。生成的項目是圓圈，所以你需要一個視圖模型屬性和每個整個小時的元素。這些元素沒有任何特性，可以簡單地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="{Binding Hours, Converter={StaticResource VisibilityConverter}, ConverterParameter=3}"/>

：然後，每個 Ellipse將使用 ConverterParameter標識 Ellipse的小時綁定 Visibility到 Hours屬性

來源

2013-09-26 07:27:49

您還可以使用自定義面板來排列ItemsControl中的項目。請參閱ItemsControl.ItemsPanel http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemspanel.aspx – Gusdor

有很多方法可以做到這一點。這是一個你可以在原始XAML做

數據綁定的ItemsControl由您的視圖模型生成布爾值的集合 - 一個布爾爲代表的每個小時。
設置ItemsControl.ItemTemplate到包括Ellipse與相同的高度和寬度，[顏色]
使用Actions/behaviors的邊界設置Ellipse到 [顏色]的填充時DataContext等於系統的模板。布爾真正

使用這種方法，你將需要調用每一次他們中的一個變化提高的PropertyChanged對整個布爾集合。

來源

2013-09-26 10:13:13 Gusdor

以WPF MVVM方式動態創建圈子

回答

相關問題