locked
How do you make a equivalent of a <th> tag in WPF/SketchFlow? RRS feed

  • Question

  • I'm still plugging away at this, the neophyte that I am.  In HTML, if you want to put a header at the top of a column of a table, you use the <th> tag.  How do I do that in SketchFlow/WPF?
    Rod
    Wednesday, March 3, 2010 10:24 PM

Answers

  • It depends on what control you are using.  The most obvious control to have headers is the datagrid, in which case the header is a property of the column.

    In the asset panel, search for "datagrid", draw one, right click it and select "add column", add a column, select the column, the header property should appear in the properties panel.

    To automatically get some columns to play with, create some sample data in the data pane, and drag the collection onto your datagrid, it will auto-generate some columns for you to examine/modify.



    If you just want to fake it with a grid, you could do something like this:
    <Grid Margin="88,73,86,96">
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="0.135*"/>
    				<ColumnDefinition Width="0.318*"/>
    				<ColumnDefinition Width="0.547*"/>
    			</Grid.ColumnDefinitions>
    			<Grid.RowDefinitions>
    				<RowDefinition Height="0.068*"/>
    				<RowDefinition Height="0.932*"/>
    			</Grid.RowDefinitions>
    			<ListBox Margin="5" Grid.Row="1">
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    			</ListBox>
    			<ListBox Margin="5" Grid.Column="1" Grid.Row="1">
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    			</ListBox>
    			<ListBox Margin="5" Grid.Column="2" Grid.Row="1">
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    			</ListBox>
    			<TextBlock Margin="0" Text="Header 1" TextWrapping="Wrap"/>
    			<TextBlock Margin="0" Grid.Column="1" Text="Header 2" TextWrapping="Wrap"/>
    			<TextBlock Margin="0" Grid.Column="2" Text="Header 3" TextWrapping="Wrap"/>
    		</Grid>
    Thursday, March 4, 2010 3:08 PM
    Moderator

All replies

  • It depends on what control you are using.  The most obvious control to have headers is the datagrid, in which case the header is a property of the column.

    In the asset panel, search for "datagrid", draw one, right click it and select "add column", add a column, select the column, the header property should appear in the properties panel.

    To automatically get some columns to play with, create some sample data in the data pane, and drag the collection onto your datagrid, it will auto-generate some columns for you to examine/modify.



    If you just want to fake it with a grid, you could do something like this:
    <Grid Margin="88,73,86,96">
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="0.135*"/>
    				<ColumnDefinition Width="0.318*"/>
    				<ColumnDefinition Width="0.547*"/>
    			</Grid.ColumnDefinitions>
    			<Grid.RowDefinitions>
    				<RowDefinition Height="0.068*"/>
    				<RowDefinition Height="0.932*"/>
    			</Grid.RowDefinitions>
    			<ListBox Margin="5" Grid.Row="1">
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    			</ListBox>
    			<ListBox Margin="5" Grid.Column="1" Grid.Row="1">
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    			</ListBox>
    			<ListBox Margin="5" Grid.Column="2" Grid.Row="1">
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    				<ListBoxItem Content="ListBoxItem"/>
    			</ListBox>
    			<TextBlock Margin="0" Text="Header 1" TextWrapping="Wrap"/>
    			<TextBlock Margin="0" Grid.Column="1" Text="Header 2" TextWrapping="Wrap"/>
    			<TextBlock Margin="0" Grid.Column="2" Text="Header 3" TextWrapping="Wrap"/>
    		</Grid>
    Thursday, March 4, 2010 3:08 PM
    Moderator
  • Hi Chuck,

    That really looks like it is going to work.  I've figured out how to add the Data toolbar to my project.  Since I want this data to only appear on this one page, I'm going to use This Document.  However, how do I enter data items?  (I don't have a lot to enter, just 3 rows or data will be enough.)

    Rod
    Monday, March 8, 2010 9:55 PM
  • Which method?  The faked out one with everything in listboxes or a real data grid?

    If you are using a datagrid, you could use the sample data feature, and edit the data there.  This isn't really a production type of method, but is meant for development with sample data.  But it would work for something very simple or a prototype.


    Tuesday, March 9, 2010 2:06 AM
    Moderator
  • I see what you mean.  I'd like to try the sample data feature.
    Rod
    Tuesday, March 9, 2010 9:19 PM