I have a GridSplitter which is dragable and both columns resize accordingly. I have a button which can hide the right column but I am looking to have another press of the button to show the right column again and still be dragable.
I have tried to use a ToggleButton but the GridSpiltter is fixed using it and is not dragable.
How can I have a button to show/hide a column and still be adjustable by the user?
GridSplitter:
<GridSplitter x:Name="rightSplitter"
Grid.Column="1"
Width="15"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Transparent"
ShowsPreview="True" />
Column Definitions:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" x:Name="rightColumn"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
Button:
<Button Width="50" Height="50" HorizontalAlignment="Right" x:Name="Details_Toggle" Focusable="False">
<StackPanel>
<Image Source="controls/details.png" />
</StackPanel>
Button Click C#:
private void deatilsShowHide(object sender, RoutedEventArgs e) {
rightColumn.Width = new GridLength(0);
rightSplitter.Visibility = System.Windows.Visibility.Collapsed;
}
Since you are making the right items collapsed, it will make the control not to be present in the panel.
Instead of making the Visibility Collapsed. We can set the width as 10 when button is clicked and when again clicked we can revert it back to original width. At the same time, we can also drag the GridSplitter.
private void deatilsShowHide(object sender, RoutedEventArgs e)
{
if(rightColumn.Width == new GridLength(10))
{
rightColumn.Width = new GridLength(300);
}
else
{
rightColumn.Width = new GridLength(10);
}
}
Xaml:-
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="300" x:Name="rightColumn"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Background="AliceBlue">
<Button Width="50" Height="50" HorizontalAlignment="Right" x:Name="Details_Toggle" Focusable="False" Click="Details_Toggle_Click">
<StackPanel>
</StackPanel>
</Button>
</StackPanel>
<GridSplitter x:Name="rightSplitter"
Width="15" Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
ShowsPreview="True" />
<StackPanel Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" >
<Button Content="test" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
</StackPanel>
</Grid>
Related
I have a simple layout and am trying to put in a flyout to use as a user input screen. Here's the xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
<Button Content="Add New Task" Command="{Binding NewTaskCommand}" Margin="{StaticResource CenteredToolMargin}"/>
<Button Content="Archive Tasks" Command="{Binding ArchiveTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
<Button Content="Complete Tasks" Command="{Binding CompleteTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
</StackPanel>
<Controls:Flyout Header="Flyout" Position="Right" Width="200" IsOpen="True">
<Controls:FlyoutsControl>
<TextBlock FontSize="24">Hello World</TextBlock>
</Controls:FlyoutsControl>
</Controls:Flyout>
</Grid>
The problem is, the flyout appears to the left of column 1 instead of on top of it. When I close the flyout, it animates over column 1, though. I tried swapping the "Controls:Flyout" and "Controls:FlyoutsControl" tags as I can't find consistent guidance on which way they should go, but it acts the same, either way. Am I missing something?
I set the Column 1 Width to Auto if you want your fixed width than in Flyout add this line Grid.Column="0" Grid.ColumnSpan="2" and remove Grid.Column="1"
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
<Button Content="Add New Task" />
<Button Content="Archive Tasks" />
<Button Content="Complete Tasks" />
</StackPanel>
<Controls:Flyout Grid.Column="1" Header="Flyout" Position="Right" Width="200" IsOpen="True">
<Controls:FlyoutsControl>
<TextBlock FontSize="24">Hello World</TextBlock>
</Controls:FlyoutsControl>
</Controls:Flyout>
</Grid>
I am facing one issue with the WPF popup control.
When we resize the window and move it, PopUp control remains at same position at which it was open previously and does not move with the window.
So what is the solution for this issue.
please provide code snippet for the solution if any. Thanks :)
Xaml code for popup control is as follows:
<Popup x:Name="popNonTopMostPopup" Height="200" Width="220" AllowsTransparency="True" Placement="Right">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<fa:FontAwesome Grid.Column="0" Icon="Play" FontSize="30" HorizontalAlignment="Right" Rotation="180" VerticalAlignment="Top" Margin="0 7 -2 0" />
<Border Grid.Column="1" BorderBrush="LightGray" Background="Black" CornerRadius="5" Height="200" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="btnCustomPopup" Click="btnCustomPopup_Click" HorizontalAlignment="Right" Background="Transparent" Foreground="LightGray" BorderBrush="Transparent" Grid.Row="0">
<StackPanel Margin="0">
<fa:FontAwesome Icon="Close" VerticalAlignment="Center" />
</StackPanel>
</Button>
<Label x:Name="lblName" Grid.Row="1" Foreground="LightGray"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblDueDate" Foreground="LightGray" Content="Fristdatum: " Grid.Column="0" VerticalAlignment="Bottom" Visibility="Hidden"></Label>
<TextBlock x:Name="txtDueDate" Foreground="LightGray" HorizontalAlignment="Left" Grid.Column="1" VerticalAlignment="Center" Visibility="Hidden"></TextBlock>
</Grid>
<Separator Grid.Row="3"></Separator>
<TextBlock x:Name="txtComments" Foreground="LightGray" TextWrapping="WrapWithOverflow" Grid.Row="4" Margin="10 10 10 10"></TextBlock>
</Grid>
</Border>
</Grid>
</Popup>
We have icons on map on click of which pop up control is displayed.Code for click event is as follows.
void pin_MouseLeftButtonDownForOrder(object sender, MouseButtonEventArgs e)
{
// set the placement target of popup as pin mapicon
popNonTopMostPopup.PlacementTarget = orderIcon;
popNonTopMostPopup.IsOpen = true;
}
I have a grid with an tap event and in this grid three more buttons with click event. The first (the middle) button is working, but the others are not. If I click on it the grid event is fired instead of the button event. And i didn't know why?
<Page
....
<Grid Background="{ThemeResource BackgroundBrush}" Tapped="Grid_Tapped">
<Grid.RowDefinitions>
<RowDefinition Height="130"/>
<RowDefinition Height="80"/>
<RowDefinition Height="10"/>
<RowDefinition Height="*"/>
<RowDefinition Height="90"/>
</Grid.RowDefinitions>
<Border Grid.Row="2" Background="#BEBEBE"/>
<Border Grid.Row="3" Background="#BEBEBE"/>
....
<Button x:Name="btnGoToContent" Content="" HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.Row="3" Margin="0,0,0,20" Height="80" Width="320" Click="btnGoToContent_Click" Style="{StaticResource ButtonStyle2}" Opacity="0.7"/>
<Button x:Name="btnDiashowBack" Content="" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Margin="0,0,0,0" Height="220" Width="220" Click="btnDiashowBack_Click" Style="{StaticResource BackButtonStyle}" Opacity="0.7"/>
<Button x:Name="btnDiashowNext" Content="" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="3" Margin="0,0,0,0" Height="220" Width="220" Click="btnDiashowNext_Click" Style="{StaticResource BackButtonMirror}" Opacity="0.7"/>
</Grid>
I don't know why it isn't working. But I've solved it with this Workaround. Skip the event in the grid event handler
private async void Grid_Tapped(object sender, TappedRoutedEventArgs e) {
if (e.OriginalSource.GetType() == typeof(TextBlock))
{
return;
}
.......
}
I have a requirement to show 3 panel with GridSplitter as separators in grid in WPF and C#. Also Closing options for each panel.
Plese see image to better understand design:
When user close the left panel , now the middle panel stretch from left , same-thing like right panel also. In run time i'll dock again these panels.
I'm tried to hidden/collapsed Closed panel and closed panel related splitterm but no luck.
Any suggestions or ideas would be most welcome?
Edited
I required 5 column definitions including splitters (3 panels and 2 splitters). Design code is
<Grid Margin="0,120,0,20" Name="panelGrid">
<!--
1)Browser
2)Player
3)Chat
-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<DockPanel Name="webBrowserPanel" Grid.Column="0"
Visibility="Visible" Background="Green" Height="auto">
<Button HorizontalAlignment="Center" Width="20"
Height="20" Click="leftBut"></Button>
</DockPanel>
<GridSplitter Name="sp1" Grid.Column="1" HorizontalAlignment="Center"
VerticalAlignment="Stretch" Background="Red"
ShowsPreview="True" Width="5"/>
<Grid x:Name="grid1" Grid.Column="2" AllowDrop="True"
Background="#FF807272"/>
<GridSplitter Name="sp2" Grid.Column="3" HorizontalAlignment="Center"
VerticalAlignment="Stretch" Background="Red"
ShowsPreview="True" Width="5"/>
<Grid x:Name="chatGrid" Grid.Column="4" Visibility="Visible"
Background="DarkOrange" >
<Button HorizontalAlignment="Center" Width="45" Height="20"
Click="righCli">
</Button>
</Grid>
</Grid>
Is this what you mean?
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="leftColumn"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" x:Name="rightColumn"/>
</Grid.ColumnDefinitions>
<!-- u can also use DockPanel within a grid -->
<DockPanel>
<!-- this border is under the splitter and can't be seen-->
<Border Background="Red" DockPanel.Dock="Right" Width="5"/>
<Border Background="#AA0">
<Button VerticalAlignment="Top" Click="Button_Click_1" Content="x"/>
</Border>
</DockPanel>
<Border Background="#0AA" Grid.Column="1">
<Button VerticalAlignment="Top" Click="Button_Click_2" Content="reset"/>
</Border>
<!-- u can also use grid within a grid -->
<Grid Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- this is also an extra column for splitter -->
<Border Background="Red" Grid.Column="0"/>
<Border Background="#A0A" Grid.Column="1">
<Button VerticalAlignment="Top" Click="Button_Click_3" Content="x"/>
</Border>
</Grid>
<GridSplitter Grid.Column="0" Width="5" x:Name="leftSplitter"/>
<!-- by setting the correct margin you hide the underlying red border -->
<GridSplitter Grid.Column="1" Width="5" x:Name="rightSplitter" Margin="0,0,-5,0"/>
</Grid>
code behind:
private void Button_Click_1(object sender, RoutedEventArgs e)
{
leftColumn.Width = new GridLength(0);
leftSplitter.Visibility = System.Windows.Visibility.Collapsed;
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
leftColumn.Width = new GridLength(40);
rightColumn.Width = new GridLength(40);
leftSplitter.Visibility = System.Windows.Visibility.Visible;
rightSplitter.Visibility = System.Windows.Visibility.Visible;
}
private void Button_Click_3(object sender, RoutedEventArgs e)
{
rightColumn.Width = new GridLength(0);
rightSplitter.Visibility = System.Windows.Visibility.Collapsed;
}
it can improved using converters to bind splitters visibilities and columndefinitions widths to a property in view model.
I have a expander which contains a grid in which I have a grid splitter.
The Document Outline and UI is like this
and here is the code.
<Grid x:Name="TopGrid" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="150"/>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Expander x:Name="CompanyDescriptionExpander" Grid.ColumnSpan="2"
VerticalAlignment="Top" IsExpanded="True" Background="Black" >
<Expander.Header>
<Grid Width="{Binding ElementName=CompanyDescriptionExpander,
Path=ActualWidth}" Background="Aquamarine">
<TextBlock Grid.Column="0" Text="Expander Header" Foreground="Black" />
</Grid>
</Expander.Header>
<Expander.Content>
<Grid x:Name="DescriptionGrid" MaxHeight="130" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="25" MaxHeight="25"/>
<RowDefinition Height="Auto" MinHeight="25" MaxHeight="120"/>
<RowDefinition Height="4" MinHeight="10" MaxHeight="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="Orange" Grid.Row="0" Grid.RowSpan="2"
MinHeight="40" MaxHeight="120" x:Name="DescriptionText"
Text="TextBlock Content" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto" />
<Button x:Name="SaveIconButton" Grid.Column="1" Grid.Row="0" Width="20"
Height="20" VerticalAlignment="Top" />
<Button x:Name="CancelIconButton" Grid.Column="1" Grid.Row="1" Width="20"
Height="20" VerticalAlignment="Top" />
<GridSplitter ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"
Grid.Row="2" Grid.ColumnSpan="2"
Height="10" MaxHeight="10" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Background="Red" />
</Grid>
</Expander.Content>
</Expander>
<Button Grid.Row="1" Grid.Column="0" Margin="0,5,0,0" Height="20"
VerticalAlignment="Top" Background="Green" />
</Grid>
When we use grid splitter it expands
But it goes on even after textbox reaches its maximum height and gridsplitter goes behind button(green).
My problem scenario can be replicated copying my code in a project
I want that it should stop when textbox reaches its maximum height.
How to do that?
In your DescriptionGrid change the second rows MaxHeight from 120 to 95.
The combined max height of the three rows in that grid exceeds the max height of the grid itself.