locked
Silverlight C# からのレイアウトの配置の仕方 RRS feed

  • 質問

  • お世話になります。

     

    VisualStudio 2010 でSilverlight の開発を最近始めました。

     

    XAMLで記載したGrid上にDataGridの配置をC#のコードで行いたいのですが、

    どのようにすれば良いでししょうか。

     

    VS2010のデザイナ上でGridを配置。RowDefinition を設定するなどして

    その上にDataGridをドラッグ&ドロップしてやれば

    XAMLのコードが自動生成され問題なくDataGridが配置されます。

     

    やりたいのは

    C#からXAMLで記載したGridにRowDefinitionを追加しながら

     

    Grid(row=1,column=0) にDataGrid1 を配置

    Grid(row=2,column=0) にDataGrid2 を配置

    Grid(row=n,column=0) にDataGridn を配置

     

    みたいな事がやりたいのですが、そもそもC#からのコントロールの配置の仕方がよくわかりません。

    書籍も何冊か購入し、インターネットで調べるなどしているのですが、コントロールのレイアウトについてXAMLでの説明ばかりで、

    XAMLで出来ることはC#やVB等でも実現できると説明されているのですが、

    いざ、C#でいろいろやろうとするとやり方がわからず行き詰ってしまいます。

     

    あわせて、もしご存知であれば

    XAMLを使用せず、C#でいろいろやる場合の方法が学習できるような書籍、サイトなどありましたら

    教えて頂けないでしょうか。

     

    よろしくお願いいたします。

     


    2011年2月26日 20:10

回答

  • こんな感じのコードでいけます。

    public partial class MainPage : UserControl
    {
      // 何行目にDataGridを置くか
      private int currentRow = 0;
    
      public MainPage()
      {
        InitializeComponent();
      }
    
      private void Button_Click(object sender, RoutedEventArgs e)
      {
        // 高さ100で行を追加
        this.LayoutRoot.RowDefinitions.Add(
          new RowDefinition { Height = new GridLength(100) });
    
        var dg = new DataGrid();
        // Grid上でのDataGridを置く行を設定
        dg.SetValue(Grid.RowProperty, currentRow++);
        // GridにDataGridを追加
        this.LayoutRoot.Children.Add(dg);
      }
    }
    
    

    XAML側はこんな感じになってます。

    <UserControl x:Class="SilverlightApplication1.MainPage"
      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"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
      <StackPanel>
        <Button Content="OK" Click="Button_Click"/>
        <Grid x:Name="LayoutRoot" Background="White">
    
        </Grid>
      </StackPanel>
    </UserControl>
    
    

    なんとなく、この要件だと素直にStackPanelを使って、そこにDataGrid追加してるのと変わらないような気がするので、もしかしたらGridじゃなくてほかのレイアウトパネルを採用したほうがいいのかもしれません。

    そして、XAMLは結局C#やVBのクラスを組み立ててるだけなので、XAMLの基本をしっかりおさえれば、C#やVBでどのように書き換えれるかはわかってくると思います。XAMLの基本は、個人的にはエッセンシャルWPFという書籍をお勧めしたいのですが、いかんせん少し情報が古くてWPF向けなので、自信を持ってお勧めできません・・・。

    あとは、MSDNの該当ページを穴を開くほど見るくらいです。
    http://msdn.microsoft.com/ja-jp/library/ms747122(v=VS.100).aspx


    かずき Blog:http://d.hatena.ne.jp/okazuki/ VS 2010のデザイナでBlendのBehaviorをサポートするツール公開してます。 http://vsbehaviorsupport.codeplex.com/
    • 回答としてマーク でぃあい 2011年2月27日 8:34
    2011年2月27日 1:33

すべての返信

  • こんな感じのコードでいけます。

    public partial class MainPage : UserControl
    {
      // 何行目にDataGridを置くか
      private int currentRow = 0;
    
      public MainPage()
      {
        InitializeComponent();
      }
    
      private void Button_Click(object sender, RoutedEventArgs e)
      {
        // 高さ100で行を追加
        this.LayoutRoot.RowDefinitions.Add(
          new RowDefinition { Height = new GridLength(100) });
    
        var dg = new DataGrid();
        // Grid上でのDataGridを置く行を設定
        dg.SetValue(Grid.RowProperty, currentRow++);
        // GridにDataGridを追加
        this.LayoutRoot.Children.Add(dg);
      }
    }
    
    

    XAML側はこんな感じになってます。

    <UserControl x:Class="SilverlightApplication1.MainPage"
      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"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
      <StackPanel>
        <Button Content="OK" Click="Button_Click"/>
        <Grid x:Name="LayoutRoot" Background="White">
    
        </Grid>
      </StackPanel>
    </UserControl>
    
    

    なんとなく、この要件だと素直にStackPanelを使って、そこにDataGrid追加してるのと変わらないような気がするので、もしかしたらGridじゃなくてほかのレイアウトパネルを採用したほうがいいのかもしれません。

    そして、XAMLは結局C#やVBのクラスを組み立ててるだけなので、XAMLの基本をしっかりおさえれば、C#やVBでどのように書き換えれるかはわかってくると思います。XAMLの基本は、個人的にはエッセンシャルWPFという書籍をお勧めしたいのですが、いかんせん少し情報が古くてWPF向けなので、自信を持ってお勧めできません・・・。

    あとは、MSDNの該当ページを穴を開くほど見るくらいです。
    http://msdn.microsoft.com/ja-jp/library/ms747122(v=VS.100).aspx


    かずき Blog:http://d.hatena.ne.jp/okazuki/ VS 2010のデザイナでBlendのBehaviorをサポートするツール公開してます。 http://vsbehaviorsupport.codeplex.com/
    • 回答としてマーク でぃあい 2011年2月27日 8:34
    2011年2月27日 1:33
  • かずき_okazaki様

     

    ご回答ありがとうございます。

    ご提示頂いた方法でDataGridの配置が出来ました。

    大変助かりました。ありがとうございました。

     

    自分がつまづいているのは

    例えば

    dg.SetValue(Grid.RowProperty, currentRow++);

    の場合ですと

    http://msdn.microsoft.com/ja-jp/library/system.windows.controls.datagrid_members%28v=VS.95%29.aspx

    ここを眺めることで SetValue が一応気になって、見てはいるのですが、理解できずスルーしてしまっていた。

    ご提示頂いたソースのおかげで今回少し理解できた状態。

     

    this.LayoutRoot.Children.Add(dg);

    の場合ですと、Children と記述するべき事が自分の中からは出てきませんでした。

     

    GUI開発未経験でいきなりSilverlightを始めているのですが、

    もしかして。NETの本とか読む必要とかあるのでしょうか。その辺よくわかりませんが。

     

    エッセンシャルWPF、つい先日購入しました。

    まだ穴が開くほどは見ていないですが、XAMLの例文がほとんどで、XAMLでやれば良い場合は良いのですが、

    C#でやりたい場合は私の中で変換できないでいます。

     

    今回の例文だけでもすごく参考になりました。

    これでまた前に進めます。

    StackPanelも試してみます。

     

    ありがとうございました。

     

     


    2011年2月27日 7:11