I create a GridSplitter across the 3 rows that I have in my grid like this:
<GridSplitter Grid.Row="0" Grid.Column="1" Background="Yellow"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Width="Auto" Height="Auto" ResizeDirection="Columns"
Grid.RowSpan="3" ...
However, it's conceivable that I might add another row to my grid at a later stage, and I don't really want to go back and update all of my rowspans.
My first guess was Grid.RowSpan="*", but that doesn't compile.
A simple solution:
<!-- RowSpan == Int32.MaxValue -->
<GridSplitter Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="2147483647" />
You can bind to the RowDefinitions.Count but would need to update the binding when adding rows manually.
Edit: Only semi-manually in fact
Xaml:
<StackPanel Orientation="Vertical">
<Grid Name="GridThing">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.Children>
<Button Content="TopRight" Grid.Row="0" Grid.Column="1"/>
<Button Content="LowerRight" Grid.Row="1" Grid.Column="1"/>
<Button Content="Span Rows" Name="BSpan" Grid.RowSpan="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=RowDefinitions.Count, Mode=OneWay}"/>
</Grid.Children>
</Grid>
<Button Click="Button_Click" Content="Add Row" />
</StackPanel>
Code:
private void Button_Click(object sender, RoutedEventArgs e)
{
GridThing.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(20) });
foreach (FrameworkElement child in GridThing.Children)
{
BindingExpression exp = child.GetBindingExpression(Grid.RowSpanProperty);
if (exp != null)
{
exp.UpdateTarget();
}
}
}
The Grid control provides nothing like this out of the box. It's conceivable that you could implement a MarkupExtension or some other trickery to enable this.
Related
I am currently fighting against another WPF struggle, namely mouse events.
I basically have a very simple control (a Border containing a Grid which itself has a few TextBlocks). I am trying to achieve a simple behavior: Double click should turn the control into edit mode (which in fact hides the TextBlocks with TextBoxes bound to the same data.
Nothing fancy, right? Well still, I'm struggling. The MouseDoubleClick linked to my UserControl just fires when I click in a control (like, clicking ON a TextBlock). If I click on an empty space between TextBlocks, nothing is fired. Not even MouseDown.
How could I make it work so as to catch every mouse click? I assumed that linking a MouseDown event to a Border should catch every click on the border but... it ended up not catching clicks on empty parts of the border.
Here is some draft code I made for you to run it:
XAML:
<StackPanel Orientation="Vertical">
<Border Height="400" Width="400" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="2"
MouseDown="Border_MouseDown" MouseUp="Border_mouseUp">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="BLUFF" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="BLUFF" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="BLUFF" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="BLUFF" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="BLUFF" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="BLUFF" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="BLUFF" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="BLUFF" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="BLUFF" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<TextBlock Height="100" Width="300" HorizontalAlignment="Center" TextAlignment="Center" x:Name="thetext" Visibility="Collapsed"
Foreground="White" Background="Red" Text="CLICKED!" />
</StackPanel>
Code behind:
private void Border_MouseDown(object sender, MouseButtonEventArgs e)
{
thetext.Visibility = Visibility.Visible;
}
private void Border_mouseUp(object sender, MouseButtonEventArgs e)
{
thetext.Visibility = Visibility.Collapsed;
}
Now try to click one of the "BLUFF" texts: A "CLICKED" Text will appear. Try clicking somewhere else, between the TextBlocks: Nothing happens.
Thank you!
<StackPanel Background="Transparent" ... >
or
<Border Background="Transparent" ... >
should do the trick...
This makes the grid transparent, however visible for mouse-clicks.
Look here form more Information.
There are some other circumstances, where you have to use the PreviewXXX- event, this is when a child element "swallows" the event away, but in your case, the above should be what you're looking for.
I'm writing now an app with WPF and trying to remember things I did long time ago.
I'm trying to have a window with 4 buttons that I will navigate with them through the app.
My code:
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="55*"/>
<ColumnDefinition Width="453*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StatusBar Margin="0" VerticalAlignment="Top" Height="23" Grid.ColumnSpan="4" Grid.Row="2" Background="#FF1A202C"/>
<Menu Margin="0" Height="23" Grid.ColumnSpan="4" Background="#FF1A202C" />
<StackPanel Grid.Row="1" Width="224.2" HorizontalAlignment="Left" Background="#FF1F7872" >
<Button Content="Dashboard" Style="{StaticResource BorderlessButton}" Foreground="#FFF1E7E7" Template="{DynamicResource GlassButton}" Margin="25,20,23,20" Click="Button_Click_1" />
<Button Content="Components" Style="{StaticResource BorderlessButton}" Foreground="#FFF1E7E7" Template="{DynamicResource GlassButton}" Margin="25,20,23,20"/>
<Button Content="TimeLine" Style="{StaticResource BorderlessButton}" Foreground="#FFF1E7E7" Template="{DynamicResource GlassButton}" Margin="25,20,23,20"/>
<Button Content="Drilldown" Style="{StaticResource BorderlessButton}" Foreground="#FFF1E7E7" Template="{DynamicResource GlassButton}" Margin="25,20,23,20"/>
</StackPanel>
<Grid Grid.Column="2" Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="2" Background="#FF72B095">
</Grid>
</Grid>
I've 4 user controls that I want they will appear in the Grid (maybe I'll need to replace the control) when I'm clicking the buttons.
A friend suggest that I'll use storyboard on Blend, but I remembered that a long time ago I did it differently and I used only XAML and C#.
I tried to use the storyboard tool but I didn’t understand how to use it, in general I think the storyboard tool is overkill for my use.
Give a name to the grid:
<Grid Name="MainGrid" >
</Grid>
and then, in code behine, handle click events:
void Button_Click_1(object sender, MouseEventArgs e)
{
MainGrid.Children.Add( // Your control //);
}
How can I get a handle for the GridSplitter inside the TitleTemplate of RadPane
<telerik:RadPane TitleTemplate="{StaticResource radPaneHeaderFormat}" ContextMenuTemplate="{x:Null}" CanDockInDocumentHost="False" x:Name="radPane" Header="HeaderTitle" CanUserClose="False" CanFloat="False" VerticalAlignment="Center" />
<DataTemplate x:Key="radPaneHeaderFormat}" ">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="670" MaxWidth="678"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0.1*" />
</Grid.ColumnDefinitions>
<Button x:Name="ViewButton" Margin="0,0,5,0" Style="{StaticResource LeftArrowButtonStyle}" Click="ViewButton_Click" />
<TextBlock Text="Summary" VerticalAlignment="Center" Grid.Column="1" />
<sdk:GridSplitter Height="Auto" Grid.Column="2" Name="HeaderSplitter" VerticalAlignment="Stretch" Style="{StaticResource newGridSplitterStyle}" />
<TextBlock Text="Note" Grid.Column="3" VerticalAlignment="Center" Margin="3,0,0,0"/>
</Grid>
</DataTemplate>
Can any one help me with this issue.
I don't know from where you want to access the GridSplitter, but, given that you have a Button with a Click event handler, I'll show you how you can access it in there:
private void ViewButton_Click(object sender, RoutedEventArgs e)
{
var button = sender as Button;
var panel = button.Parent as Panel;
if (panel != null)
{
GridSplitter splitter = panel.Children.OfType<GridSplitter>().First();
// do stuff with the GridSplitter...
}
}
You will need to add a line using System.Linq; if you don't already have one.
In this case I'm making use of the fact that the button's Click event handler passes us the button that was clicked, and that the Button and the GridSplitter have the same parent.
I'm pretty new to WPF, so please excuse me if this is 'old hat' these days... have trawled the web/forum and haven't quite found the answer I need:
I have a WPF grid with 5 columns - three for data, two for gridsplitters, which (thanks to info on this site!) seems to work and resize fine. However - I need to be able to show/hide the middle column. I can sort-of do this, but when I hide the middle column, the left hand gridsplitter still affects the "hidden" column - I need to effectively toggle between 2 & three colums. Here's my (prototype) code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="Col0" Width="*" />
<ColumnDefinition Name="Col1" Width="auto" />
<ColumnDefinition Name="Col2" Width="*" />
<ColumnDefinition Name="Col3" Width="auto" />
<ColumnDefinition Name="Col4" Width="auto" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Height="100" HorizontalAlignment="Center" Margin="0" Name="GridSplitter1" VerticalAlignment="Stretch" Width="3" />
<GridSplitter Grid.Column="3" Height="100" HorizontalAlignment="Center" Margin="0" Name="GridSplitter2" VerticalAlignment="Stretch" Width="3" />
<Border BorderBrush="Silver" BorderThickness="1" Grid.Column="0" HorizontalAlignment="Stretch" Margin="0" Name="Border1" VerticalAlignment="Stretch" Background="#FFC84797" />
<Border BorderBrush="Silver" BorderThickness="1" Grid.Column="2" HorizontalAlignment="Stretch" Margin="0" Name="Border2" VerticalAlignment="Stretch" Background="Black" />
<Border BorderBrush="Silver" BorderThickness="1" Grid.Column="4" HorizontalAlignment="Stretch" Margin="0" Name="Border3" VerticalAlignment="Stretch" Background="#FFA60000">
<Button Content="hide" Height="33" Name="butHide" Width="85" />
</Border>
</Grid>
Private Sub butHide_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles butHide.Click
If butHide.Content = "hide" Then
butHide.Content = "show"
Col2.Width = New GridLength(0)
Border2.Visibility = System.Windows.Visibility.Collapsed
GridSplitter2.Visibility = System.Windows.Visibility.Collapsed
Else()
butHide.Content = "hide"
Col2.Width = New GridLength(1, GridUnitType.Star)
Border2.Visibility = System.Windows.Visibility.Visible
GridSplitter2.Visibility = System.Windows.Visibility.Visible
End If
End Sub
Probably the easiest thing for you here is just to set Grid.ZIndex="2" for Border1 and then toggle the ColumnSpan between 1 and 3 in the click event.
<Border Grid.Column="0"
Grid.ZIndex="2"
Name="Border1"
.../>
Code behind
private void butHide_Click(object sender, RoutedEventArgs e)
{
if (butHide.Content.ToString() == "hide")
{
butHide.Content = "show";
Grid.SetColumnSpan(Border1, 3);
}
else
{
butHide.Content = "hide";
Grid.SetColumnSpan(Border1, 1);
}
}
The other solution is put the grid splitter in the same column you want to resize behind its content and set margin to the content. See this link for reference solution: http://www.ehow.com/how_4546867_use-gridsplitter-wpf.html
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="4" Background="Yellow"/>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="0 0 4 0" Background="LightGray">Text Block</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Background="LightGreen">Text Block 2</TextBlock>
</Grid>
Read more: How to Use a Gridsplitter in WPF | eHow.com http://www.ehow.com/how_4546867_use-gridsplitter-wpf.html#ixzz1mXqi6sGa
I'm trying to make a list that is populated by external data and I have a datatemplate for it.
Each element of the list is composed of an image and two textblocks, and is linked to a specific page.
I'm trying to do this but when I wrap the structure with an HyperlinkButton, I just get a blank page.
I don't know if I'm doing something stupid wrong or it's not possible to have so many items in an HyperlinkButton. If it's not possible to do it this way, can someone guide me to the best solution to do this? Here's the code:
<Grid x:Name="ContentPanel" Margin="0,140,0,0" Background="White">
<ListBox HorizontalAlignment="Stretch" Name="itemList" VerticalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<HyperlinkButton>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="480">
<Grid.Background>
<ImageBrush ImageSource="/app;component/Images/degradat_cela.png" Stretch="UniformToFill" AlignmentY="Top" AlignmentX="Left" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="430*" />
</Grid.ColumnDefinitions>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="38" Width="38" Grid.RowSpan="2" Grid.Column="0" Grid.Row="0" BorderThickness="1" BorderBrush="#FFFF003F" Padding="1">
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="listImage" Width="36" Height="36" Source="{Binding image}" />
</Border>
<TextBlock Margin="5 12 0 0" Grid.Column="1" Grid.Row="0" Name="title" Foreground="Black" Text="{Binding title}" FontWeight="Bold" FontSize="18" />
<TextBlock Margin="5 0 0 8" Grid.Column="1" Grid.Row="1" Name="description" Foreground="Black" Text="{Binding subtitle}" FontSize="14" />
</Grid>
</HyperlinkButton>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I will also accept any suggestions to make my code better, as I'm new to .NET and I probably don't do things the best way!
Remove the HyperlinkButton and instead use the SelectionChanged event of the ListBox. So add this property to your ListBox:
SelectionChanged="myListBox_SelectionChanged"
Then in your code behind do this:
private void myListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
if ((sender as ListBox).SelectedIndex == -1)
return;
NavigationService.Navigate(new System.Uri(string.Format("/Drilldown.xaml?Index={0}",(sender as ListBox).SelectedIndex),System.UriKind.Relative));
}
This code assumes a drilldown page that uses a query string to change it's layout. This is just for example. If instead of index you wanted to reference some property of the bound item you could instead do something like this (assuming an ID property):
int itemID = ((sender as ListBox).SelectedItem as MyApp.Model.myItem).ID;
NavigationService.Navigate(new System.Uri(string.Format("/Drilldown.xaml?ID={0}",itemID),System.UriKind.Relative));