2011-10-07 31 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として、それらを設定:あなたのItemsControlには、各アイテムのレンダリングに使用されるDataTemplateを持って

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

<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型で見つかりませんでした」というメッセージが表示されます。私はあなたも文字通りあなたを連れてきたかもしれませんが、あなたのコードに貼り付け、ItemsControl名を変更し、(2)UniformGridのrows/columns属性を埋めて、(3)タグとコンテンツの構文を修正しました。 [P.S.私は.Net 3.5に入っています。] –

+0

上記のコードはメモリにあったので、いくつかのタイプミスがあるかもしれません。代わりにItemsPanelTemplateかもしれないと思います。 – ColinE

2

代替()純粋なXAMLのより多くのソリューションは、デフォルトのスタイルBASEDONあなたの名前のスタイルを使用するだろう、とClickEventためEventSetterを追加:

<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

関連する問題