# .NET and More > WPF, WCF, WF >  [RESOLVED] Very new to WPF - how could I do this

## szlamany

I've got an area on the screen that needs to show dates/day's and have a "graph-like" height to each tab under the date/day.

Any easy way to accomplish this with WPF?  I read that canvas panels are evil - but I'm thinking that would be the easiest way to accomplish this math-wise.

I'm having a really hard time with the xaml - seems I always need to edit the source of it (and it certainly is not HTML!!) - and not use the properties window in VS2012 (because I am overwhelmed by the options in it - argh).

----------


## dee-u

If I would attack it perhaps I would just use a grid with 2 rows (depending if we just need 2 rows) and 7 columns. How is the height of those controls populated? And should it contain all the dates in a month?

----------


## szlamany

Height is gotten at run-time - gotten from a DB.

----------


## dee-u

If you could cite a sample measurement I will try to create an example for you when I have free time.

----------


## szlamany

Ok - the height of the graph lines are based on a factor of 100 - max height. 

Those 7 days would be something like:  50, 60, 55, 65, 60, 55, 55

----------


## dee-u

Not sure if you already made some headway with this but here's a very simple code which mimics it but not entirely, just wanted to show how you can utilize a grid for it. Here's the XAML


```
<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="100" />               
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        
        <TextBlock Text="June 2013" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="7" TextAlignment="Right" VerticalAlignment="Stretch" Background="#FFB7CDF2" Foreground="#FF5271B7" />
        
        <TextBlock Text="9   S" x:Name="Col1" Grid.Row="1" Grid.Column="0" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1" />
        <TextBlock Text="10 M" x:Name="Col2" Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="11 T" x:Name="Col3" Grid.Row="1" Grid.Column="2" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="12 W" x:Name="Col4" Grid.Row="1" Grid.Column="3" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="13 Th" x:Name="Col5" Grid.Row="1" Grid.Column="4" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="14 F" x:Name="Col6" Grid.Row="1" Grid.Column="5" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="15 S" x:Name="Col7" Grid.Row="1" Grid.Column="6" TextWrapping="Wrap" TextAlignment="Justify" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1" HorizontalAlignment="Stretch" />
    </Grid>
</Window>
```

and heres' the code-behind:


```
namespace WpfApplication7
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Col1.Height = 50;
            Col2.Height = 60;
            Col3.Height = 55;
            Col4.Height = 65;
            Col5.Height = 50;
            Col6.Height = 55;
            Col7.Height = 55;
        }
    }
}
```

----------


## szlamany

Thanks!

I cannot seem to get the image to get past this screen shot.  I did set a break in the Window_Loaded event - it is getting to that spot.

----------


## dee-u

If you are stepping through the lines where I am setting their heights then not sure what the problem is. It can modify the heights here. Try fiddling with the Height property and/or the VerticalAlignment property.

----------


## szlamany

Sorry - that was my fault - somehow didn't have the loaded event setup properly.  Could have swore it broke into it...

At any rate - it's working now but the text of the date and day float up to the height of these tabs.  How could I make them stay down?

----------


## dee-u

Looking at your original image it looks like you may need to have 2 textblock, 1 for the letters and 1 for the numbers, and you can put them in a border or something and you should only resize the parent control. Will try to play more with it later if I have more time but got to go for now.

----------


## szlamany

Thanks a whole lot for what you've done so far!!

I think I have to consider minimum size and how it plays into the range being filled - yeah - probably different parts of the vertical need to be built - and grow one - or something like that.

Can I just float the TEXT on front of the column tabs that grow?  Is there a z-order to this a bit??

----------


## dee-u

I think this is closer now to what you need. With this you could also specify a different foreground color for the number and letters. And still this uses a grid within a grid now and you will have to specify the height of the individual grids now.


```
<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="100" />               
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        
        <TextBlock Text="June 2013" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="7" TextAlignment="Right" VerticalAlignment="Stretch" Background="#FFB7CDF2" Foreground="#FF5271B7" />

        <Grid x:Name="grid1" Grid.Row="1" Grid.Column="0" Background="#FFA27EDB" VerticalAlignment="Bottom" Margin="1" >
              <Grid.RowDefinitions>
                <RowDefinition Height="20*" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <TextBlock Text="9" Grid.Row="0" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
            <TextBlock Text="S" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
        </Grid>
        <Grid x:Name="grid2" Grid.Row="1" Grid.Column="1" Background="#FFA27EDB" VerticalAlignment="Bottom" Margin="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="20*" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <TextBlock Text="10" Grid.Row="0" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
            <TextBlock Text="M" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
        </Grid>

        <Grid x:Name="grid3" Grid.Row="1" Grid.Column="2" Background="#FFA27EDB" VerticalAlignment="Bottom" Margin="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="20*" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <TextBlock Text="11" Grid.Row="0" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
            <TextBlock Text="T" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
        </Grid>

        <Grid x:Name="grid4" Grid.Row="1" Grid.Column="3" Background="#FFA27EDB" VerticalAlignment="Bottom" Margin="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="20*" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <TextBlock Text="12" Grid.Row="0" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
            <TextBlock Text="W" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
        </Grid>

        <Grid x:Name="grid5" Grid.Row="1" Grid.Column="4" Background="#FFA27EDB" VerticalAlignment="Bottom" Margin="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="20*" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <TextBlock Text="13" Grid.Row="0" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
            <TextBlock Text="Th" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
        </Grid>

        <Grid x:Name="grid6" Grid.Row="1" Grid.Column="5" Background="#FFA27EDB" VerticalAlignment="Bottom" Margin="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="20*" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <TextBlock Text="14" Grid.Row="0" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
            <TextBlock Text="F" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
        </Grid>

        <Grid x:Name="grid7" Grid.Row="1" Grid.Column="6" Background="#FFA27EDB" VerticalAlignment="Bottom" Margin="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="20*" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <TextBlock Text="15" Grid.Row="0" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
            <TextBlock Text="S" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="Transparent" Margin="1" />
        </Grid>
        
        <!--<TextBlock Text="10 M" x:Name="Col2" Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="11 T" x:Name="Col3" Grid.Row="1" Grid.Column="2" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="12 W" x:Name="Col4" Grid.Row="1" Grid.Column="3" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="13 Th" x:Name="Col5" Grid.Row="1" Grid.Column="4" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="14 F" x:Name="Col6" Grid.Row="1" Grid.Column="5" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1"/>
        <TextBlock Text="15 S" x:Name="Col7" Grid.Row="1" Grid.Column="6" TextWrapping="Wrap" TextAlignment="Justify" VerticalAlignment="Bottom" Background="#FFA27EDB" Margin="1" HorizontalAlignment="Stretch" />-->
    
    </Grid>
</Window>
```

And here's the code to specify the height just in case:


```
private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            grid1.Height = 50;
            grid2.Height = 60;
            grid3.Height = 55;
            grid4.Height = 65;
            grid5.Height = 50;
            grid6.Height = 55;
            grid7.Height = 55;
        }
```

----------


## szlamany

Wow - that's great.  Thank you very much!

----------


## dee-u

Glad to be of help! =)

----------

