2011-10-07 85 views
5

我有一個UserControl是一個按鈕,具有一定的特性,並且我有一個窗口,其中有幾個這些按鈕的「正常」樣式。在同一個窗口中,我定義了一個覆蓋一些正常特徵的樣式,我想要一堆樣式(有點像鍵盤佈局)。我所擁有的是30行這樣的UniformGrid:WPF重複元素

<wft:TouchButton Style="{StaticResource smallButtonStyle}" Click="TouchButton_Click" Tag="1">1</wft:TouchButton> 

<wft:TouchButton Style="{StaticResource smallButtonStyle}" Click="TouchButton_Click" Tag="2">2</wft:TouchButton> 

<wft:TouchButton Style="{StaticResource smallButtonStyle}" Click="TouchButton_Click" Tag="3">3</wft:TouchButton> 

,其中來自行線改變的僅僅是標籤和內容值。什麼是更好的方式來佈置重複的東西,樣式和點擊事件不必在每一行都有?

回答

3

我猜到了可啉的反應是關閉他的頭頂,我給了他一個+1指向正確的方向[感謝],雖然它不正確的工作。我結束了與接近:

在構造函數中的窗口,成立了30幾乎相同的線路:

var numberButtons = Enumerable.Range(1, 30) 
    .Select(r => new KeyValuePair<string,string>(r.ToString(), r.ToString())) 
    .ToList(); 
numberButtonItems.ItemsSource = numberButtons; 

然後,此XAML(注意,「標題」是的屬性我們的用戶控件,所以它不會爲你工作):

<ItemsControl Grid.Row="1" x:Name="numberButtonItems"> 
    <ItemsControl.ItemsPanel> 
    <!-- specify the panel that is the container for your items --> 
     <ItemsPanelTemplate> 
      <UniformGrid Rows="4" Columns="10" HorizontalAlignment="Left" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <!-- specify the template used to render each item --> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <wft:TouchButton Style="{StaticResource smallButtonStyle}" 
        Click="TouchButton_Click" 
        Tag="{Binding Key}" 
        Caption="{Binding Value}"/> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 
9

一個更好的辦法是在代碼中創建一個數據對象,它表示你在你的UI需要的30個項目,例如:

class DataObject 
{ 
    string Tag {get;set;} 
    string Content {get;set;} 
} 

(我相信你能想出一個更好的比這個名字!)。然後創建你的30個項目,並將它們設置爲一個ItemsControl的ItemsSource時:

List<DataObject> myObjects = new List<DataObject>(); 
// populate here 
itemsControl.ItemsSource = myObjects 

你的ItemsControl有用於呈現每個項目一個DataTemplate:

<ItemsControl x:Name="itemsControl"> 
    <!-- specify the panel that is the container for your items --> 
    <ItemsControl.ItemPanelTemplate> 
    <ItemPanelTemplate> 
     <UniformGrid/> 
    </ItemPanelTemplate> 
    </ItemsControl.ItemPanelTemplate> 
    <!-- specify the template used to render each item --> 
    <ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <wft:TouchButton Style="{StaticResource smallButtonStyle}" 
         Click="TouchButton_Click" 
         Tag="{Binding Tag}"/ 
         Content="{Binding Content}"> 
    </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 
+1

我得到「可附加屬性'ItemPanelTemplate'沒有在類型ItemsControl中找到」。我可能從字面上理解了你,但是我粘貼了代碼,更改了(1)ItemsControl Name,(2)填充了UniformGrid的rows/columns屬性,(3)修復了Tag和Content的語法。 [附註:我在.Net 3.5中。] –

+0

上面的代碼來自內存,所以可能有一些錯別字。我認爲它可能是ItemsPanelTemplate。 – ColinE

2

純XAML溶液)的替代方案(更多是使用默認樣式支持算法FMP的命名風格,並添加EventSetter的ClickEvent :

<UniformGrid> 
    <UniformGrid.Resources> 
     <Style TargetType="{x:Type wft:TouchButton}" BasedOn="{StaticResource smallButtonStyle}"> 
      <EventSetter Event="Click" Handler="chButton_Click" /> 
     </Style> 
    </UniformGrid.Resources> 
    <wft:TouchButton Tag="1">1</wft:TouchButton> 
    <wft:TouchButton Tag="2">2</wft:TouchButton> 
    <wft:TouchButton Tag="3">3</wft:TouchButton> 
</UniformGrid> 

爲別人一個完整的通用例子誰碰到這個答案運行:

現有的代碼可能是這樣的:

<Window x:Class="TestWPF.MainWindow" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Title="MainWindow"> 
    <Window.Resources> 
     <Style x:Key="myButtonStyle" TargetType="{x:Type Button}"> 
      <Setter Property="Background" Value="Red" /> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <StackPanel> 
      <Button Style="{StaticResource myButtonStyle}" Content="1" Click="Button_Click" /> 
      <Button Style="{StaticResource myButtonStyle}" Content="2" Click="Button_Click" /> 
      <Button Style="{StaticResource myButtonStyle}" Content="3" Click="Button_Click" /> 
      <Button Style="{StaticResource myButtonStyle}" Content="4" Click="Button_Click" /> 
      <Button Style="{StaticResource myButtonStyle}" Content="5" Click="Button_Click" /> 
      <Button Style="{StaticResource myButtonStyle}" Content="6" Click="Button_Click" /> 
     </StackPanel> 
    </Grid> 
</Window> 

而且你可以把它改成如下:

<Window x:Class="TestWPF.MainWindow" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Title="MainWindow"> 
    <Window.Resources> 
     <Style x:Key="myButtonStyle" TargetType="{x:Type Button}"> 
      <Setter Property="Background" Value="Red" /> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <StackPanel> 
      <StackPanel.Resources> <!-- Adding style below will apply to all Buttons in the stack panel --> 
       <Style TargetType="{x:Type Button}" BasedOn="{StaticResource myButtonStyle}"> 
        <EventSetter Event="Click" Handler="Button_Click" /> 
       </Style> 
      </StackPanel.Resources> 
      <Button Content="1" /> 
      <Button Content="2" /> 
      <Button Content="3" /> 
      <Button Content="4" /> 
      <Button Content="5" /> 
      <Button Content="6" /> 
     </StackPanel> 
    </Grid> 
</Window> 
+0

我沒有選擇這個作爲答案,因爲我試圖擺脫30行幾乎完全相同的行,但+1保持純xaml並在StackPanel級別展示資源,而僅留下其他按鈕。 –

+0

順便說一下,這確實回答了問題的一部分,即如何防止重複樣式並單擊多行中的每一行。 –

+0

@Kelly Cline - 沒問題...我很高興你能爲你找到一個好的解決方案。我只是想,如果有人遇到這篇文章,我會添加這個答案。 – Scott