1 Attachment(s)
[RESOLVED] Very new to WPF - how could I do this
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).
Re: Very new to WPF - how could I do this
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?
Re: Very new to WPF - how could I do this
Height is gotten at run-time - gotten from a DB.
Re: Very new to WPF - how could I do this
If you could cite a sample measurement I will try to create an example for you when I have free time.
Re: Very new to WPF - how could I do this
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
Re: Very new to WPF - how could I do this
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
Code:
<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:
Code:
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;
}
}
}
1 Attachment(s)
Re: Very new to WPF - how could I do this
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.
Re: Very new to WPF - how could I do this
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.
Re: Very new to WPF - how could I do this
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?
Re: Very new to WPF - how could I do this
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.
Re: Very new to WPF - how could I do this
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??
Re: Very new to WPF - how could I do this
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.
Code:
<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:
Code:
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;
}
Re: Very new to WPF - how could I do this
Wow - that's great. Thank you very much!
Re: [RESOLVED] Very new to WPF - how could I do this
