none
how define Grid's Column and Row style in Resources section? RRS feed

  • Question

  • I'm expecting something like this:
    <x.Resources>
    <Style TargetType="Grid.Column" x:Key="StyleC">
      <Setter Property="HorinzontalAlignment" Value="Right" />
      ...
    </Style>
    
    <Style TargetType="Grid.Row" x:Key="StyleR">
      <Setter Property="Height" Value="30" />
      ...
    </Style>
    </x.Resources>
    
    <Grid ColumnStyle="StyleC" RowStyle="StyleR">
    ...
    But I can't find the proper to do it in wpf xaml.
    Should I look into DataTemplate thingy?
    Friday, March 5, 2010 5:21 AM

Answers

  • Ya, I found some articles on net, practically (WPF.Grid != HTML.Table).

    I worked out tricks (with more lots of things to get it done) to get what i needed:

    1. Work out a Style targetting on UserControl, but with the Template as I wanted (Grid)
        <Style x:Key="CustomTable" TargetType="UserControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="UserControl">
                        <Grid Name="CustomTable_Grid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            
                            <Grid.RowDefinitions>
                                <RowDefinition Height="35" />
                            </Grid.RowDefinitions>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="CustomTable_Column_0" TargetType="FrameworkElement">
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="0,0,5,0" />
        </Style>
    
        <Style x:Key="CustomTable_Column_1" TargetType="FrameworkElement">
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    Then I worked the code to load this Style, grab the CustomTable_Grid, create my Grid dynamically with the Cols and Rows mirroring the CustomTable_Grid.

            RowDefinition RowTemplate = null;
            Style StyleColumn00 = null;
            Style StyleColumn01 = null;
    
            void LoadStyle()
            {
                string thisTypeName = "whatever";
    
                // .GetUri() is a custom helper.
                Uri uriStyle = this.GetType().GetUri("Styles/" + thisTypeName + ".xaml");
                ResourceDictionary rd = new ResourceDictionary();
                rd.Source = uriStyle;
    
                object tryStyle = null;
    
                tryStyle = rd[thisTypeName];
                if (tryStyle != null)
                {
                    Style styleCT = (Style)tryStyle;
    
                    UserControl dummy = new UserControl();
                    dummy.Style = styleCT;
                    if (dummy.Template != null)
                    {
                        object obj1 = null;
                        if (dummy.Template.HasContent)
                        {
                            obj1 = dummy.Template.LoadContent();
                        }
                        
                        if ((obj1 != null) && (obj1 is Grid))
                        {
                            Grid grd = (Grid)obj1;
    
                            this.ColumnDefinitions.Clear();
                            while (grd.ColumnDefinitions.Count > 0)
                            {
                                ColumnDefinition clm = grd.ColumnDefinitions[0];
                                grd.ColumnDefinitions.RemoveAt(0);
                                this.ColumnDefinitions.Add(clm);
                            }
    
                            this.RowDefinitions.Clear();
                            if (grd.RowDefinitions.Count > 0)
                            {
                                // CloneXamlStuff()  is a helper
                                RowTemplate = XamlHelper.CloneXamlStuff<RowDefinition>(grd.RowDefinitions[0]);
                            }
                        }
                    }
                }
    
                tryStyle = rd[StyleName_Column00];
                if (tryStyle != null)
                {
                    this.StyleColumn00 = (Style)tryStyle;
                }
    
                tryStyle = rd[StyleName_Column01];
                if (tryStyle != null)
                {
                    this.StyleColumn01 = (Style)tryStyle;
                }
            }
    


    CloneXamlStuff() is borrowed from:

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/0df6181d-938f-4f45-9463-5b5035b57000

    • Marked as answer by Kelmen Friday, March 5, 2010 9:17 AM
    Friday, March 5, 2010 9:15 AM

All replies

  • Hi Kelmen

    There is not ColumnStyle and RowStyle properties in Grid. We can define ColumnDefinitions and RowDefinitions in Grid,  and set ColumnDefinition.Style into our custom style.

    like:
    <Window x:Class="How_define_Grid_s_Column_and_Row_style_in_Resources_section.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="354" Width="379">
        
        
        <Window.Resources>
            <Style TargetType="RowDefinition">
                <Setter Property="Height" Value="100"/>
            </Style>
            
            <Style TargetType="ColumnDefinition">
                <Setter Property="Width" Value="100" />
            </Style>
        </Window.Resources>
        
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
        </Grid>
    </Window>
    Friday, March 5, 2010 6:14 AM
  • is there a way I can define both the columns and rows style within the Grid style?
    <x.Resources>
    <Style TargetType="Grid" x:Key="StyleG">
      <Setter Property="ColumnDefinitions">
        <Setter.Value>
          <ControlTemplate TargetType="ColumnDefinitions">
             <ColumnDefinition Width="150" />
             <ColumnDefinition Width="*" />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    
      <Setter Property="RowDefinitions">
        <Setter.Value>
          <ControlTemplate TargetType="RowDefinitions">
             <RowDefinition Height="30" />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    </x.Resources>
    ...
    <Grid Style="StyleG">
    I got problem at the ControlTemplate section...
    Friday, March 5, 2010 6:44 AM
  • Hi Kelmen,

    ColumnDefinitions and RowDefinitions of Grid are not in visual tree, so we can not define Controltemplate for them.
    ControlTemplate's TargetType must be Control, Page, PageFunctionBase or a subclass of the same.

    Maybe this article can help you :
    http://msdn.microsoft.com/en-us/library/ms745823.aspx

     <Grid>
          <Grid.Resources>
             <Style x:Key="Odd" TargetType="{x:Type ColumnDefinition}">
                <Setter Property="Width" Value="30"/>
             </Style>
             <Style x:Key="Nos" TargetType="{x:Type ColumnDefinition}">
                <Setter Property="Width" Value="60"/>
             </Style>
          </Grid.Resources>
          <Grid.ColumnDefinitions>
             <ColumnDefinition Style="{StaticResource Odd}" />
             <ColumnDefinition Style="{StaticResource Nos}"/>
             <ColumnDefinition Style="{StaticResource Odd}"/>
             <ColumnDefinition Style="{StaticResource Nos}"/>
             <ColumnDefinition Style="{StaticResource Odd}"/>
             <ColumnDefinition Style="{StaticResource Nos}"/>
          </Grid.ColumnDefinitions>
          
          <Button Grid.Column="0">0</Button>
          <Button Grid.Column="1">1</Button>
          <Button Grid.Column="2">2</Button>
          <Button Grid.Column="3">3</Button>
          <Button Grid.Column="4">4</Button>
          
       </Grid>


    Hope this helps.

    Friday, March 5, 2010 8:40 AM
  • Ya, I found some articles on net, practically (WPF.Grid != HTML.Table).

    I worked out tricks (with more lots of things to get it done) to get what i needed:

    1. Work out a Style targetting on UserControl, but with the Template as I wanted (Grid)
        <Style x:Key="CustomTable" TargetType="UserControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="UserControl">
                        <Grid Name="CustomTable_Grid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            
                            <Grid.RowDefinitions>
                                <RowDefinition Height="35" />
                            </Grid.RowDefinitions>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="CustomTable_Column_0" TargetType="FrameworkElement">
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="0,0,5,0" />
        </Style>
    
        <Style x:Key="CustomTable_Column_1" TargetType="FrameworkElement">
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    Then I worked the code to load this Style, grab the CustomTable_Grid, create my Grid dynamically with the Cols and Rows mirroring the CustomTable_Grid.

            RowDefinition RowTemplate = null;
            Style StyleColumn00 = null;
            Style StyleColumn01 = null;
    
            void LoadStyle()
            {
                string thisTypeName = "whatever";
    
                // .GetUri() is a custom helper.
                Uri uriStyle = this.GetType().GetUri("Styles/" + thisTypeName + ".xaml");
                ResourceDictionary rd = new ResourceDictionary();
                rd.Source = uriStyle;
    
                object tryStyle = null;
    
                tryStyle = rd[thisTypeName];
                if (tryStyle != null)
                {
                    Style styleCT = (Style)tryStyle;
    
                    UserControl dummy = new UserControl();
                    dummy.Style = styleCT;
                    if (dummy.Template != null)
                    {
                        object obj1 = null;
                        if (dummy.Template.HasContent)
                        {
                            obj1 = dummy.Template.LoadContent();
                        }
                        
                        if ((obj1 != null) && (obj1 is Grid))
                        {
                            Grid grd = (Grid)obj1;
    
                            this.ColumnDefinitions.Clear();
                            while (grd.ColumnDefinitions.Count > 0)
                            {
                                ColumnDefinition clm = grd.ColumnDefinitions[0];
                                grd.ColumnDefinitions.RemoveAt(0);
                                this.ColumnDefinitions.Add(clm);
                            }
    
                            this.RowDefinitions.Clear();
                            if (grd.RowDefinitions.Count > 0)
                            {
                                // CloneXamlStuff()  is a helper
                                RowTemplate = XamlHelper.CloneXamlStuff<RowDefinition>(grd.RowDefinitions[0]);
                            }
                        }
                    }
                }
    
                tryStyle = rd[StyleName_Column00];
                if (tryStyle != null)
                {
                    this.StyleColumn00 = (Style)tryStyle;
                }
    
                tryStyle = rd[StyleName_Column01];
                if (tryStyle != null)
                {
                    this.StyleColumn01 = (Style)tryStyle;
                }
            }
    


    CloneXamlStuff() is borrowed from:

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/0df6181d-938f-4f45-9463-5b5035b57000

    • Marked as answer by Kelmen Friday, March 5, 2010 9:17 AM
    Friday, March 5, 2010 9:15 AM
  • Cool !  Thank you for sharing your experience.
    Friday, March 5, 2010 9:22 AM
  • Please see this CodeProject article. I hope you find it useful.
    Monday, July 30, 2012 12:06 PM