I have a Grid with a StackPanel as header, something like this in XAML:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="HeaderPanel" Grid.Row="0">
<Rectangle Height="100" Fill="Red" />
</StackPanel>
<Rectangle Fill="Blue" Grid.Row="1" />
</Grid>
When I remove the red rectangle in C# code:
HeaderPanel.Children.Clear()
It disappears but it still takes up space. I expected the Auto height StackPanel should collapse to 0 and the blue rectangle to take all the space of the grid. Can I make the sizes to be recalculated?
Platform is Windows Phone 8.
Inspired by Chris W.s comment, this is how I solved it. I changed the XAML to something like:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Height="100" Fill="Red" x:Name="Header" Grid.Row="0"/>
<Rectangle Fill="Blue" Grid.Row="1" />
</Grid>
Then in code I do:
ContentPanel.Children.Remove(Header);
If I want to add an other header:
Rectangle r2 = new Rectangle();
r2.Fill = new SolidColorBrush(Colors.Green);
r2.SetValue(Grid.RowProperty, 0);
r2.Height = 50;
ContentPanel.Children.Add(r2);
I came across this in a Windows Phone Silverlight project. I really wanted to keep the StackPanels so I found a workaround with the Height property. I have a method that fills the stack panel with UIElements:
private void LayoutStackPanel(IEnumerable<UIElement> elements)
{
stackPanel.Children.Clear();
if (elements.Count == 0)
{
stackPanel.Height = 0;
}
else
{
// height must be removed or ui elements will overlap
stackPanel.ClearValue(StackPanel.HeightProperty);
foreach (var element in elements)
{
stackPanel.Children.Add(element);
}
}
}
I've only tested on Windows Phone but I think it would work on WPF as well.
Related
I have a grid divided into 4 grids A, B, C & D. I need to enable a horizontal scrollviewer only for 2 grids A and B. However, I need to enable a vertical scrollviewer only for 2 grids B & D. How can grid B be included in both the first horizontal scrollviewer and the second vertical scrollviewer?
Thanks a lot in advance.
Edit: Maximizing the window always makes it positioned on the left upper part of the window as depicted in the image below:
Here's the code I added for making sure the maximized window is positioned away from the upper left region. However, nothing changes about this issue!
private void Window_StateChanged(object sender, EventArgs e)
{
if (this.WindowState == WindowState.Maximized)
{
// Left = System.Windows.SystemParameters.WorkArea.Width - Width;
Left = 200;
// Top = System.Windows.SystemParameters.WorkArea.Height - Height;
Top = 200;
}
}
Any hints for keeping the window centered in the maximizing mode? Thanks very much in advance.
I'm assuming you're not really interested in a UniformGrid, but rather looking for a way to have a vertical ScrollViewer inside an horizontal ScrollViewer.
This code gives you a 2x2 Grid :
A B
C D
The first element added is an horizontal ScrollViewer that span inside both A and C, this element is divided in two, the bottom part has a vertical ScrollViewer.
The elements in B and D are simple elements.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="http://via.placeholder.com/1000x1000"/>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<Image Source="http://via.placeholder.com/1000x1000"/>
</ScrollViewer>
</Grid>
</ScrollViewer>
<Image Grid.Column="1" Grid.Row="0" Source="http://via.placeholder.com/1000x1000"/>
<Image Grid.Column="1" Grid.Row="1" Source="http://via.placeholder.com/1000x1000"/>
</Grid>
EDIT
Here's a new code to suit the requirements in your edit.
XAML
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="A" Grid.Column="0" Grid.Row="0" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" ScrollChanged="A_ScrollChanged">
<Image Stretch="None" Source="http://lorempixel.com/1000/1000/"/>
</ScrollViewer>
<ScrollViewer x:Name="B" Grid.Column="0" Grid.Row="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" ScrollChanged="B_ScrollChanged">
<Image Stretch="None" Source="http://lorempixel.com/1000/1000/"/>
</ScrollViewer>
<ScrollViewer x:Name="C" Grid.Column="1" Grid.Row="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
<Image Stretch="None" Source="http://lorempixel.com/1000/1000/"/>
</ScrollViewer>
<ScrollViewer x:Name="D" Grid.Column="1" Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible" ScrollChanged="D_ScrollChanged">
<Image Stretch="None" Source="http://lorempixel.com/1000/1000/"/>
</ScrollViewer>
</Grid>
Code behind
private void A_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
B.ScrollToHorizontalOffset(e.HorizontalOffset);
}
private void B_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
A.ScrollToHorizontalOffset(e.HorizontalOffset);
D.ScrollToVerticalOffset(e.VerticalOffset);
}
private void D_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
B.ScrollToVerticalOffset(e.VerticalOffset);
}
I'm writing an application that has multiple ToolbarControls. There are other UI elements between the toolbars, so I cannot use ToolbarManagers. Here is the UI Hierarchy:
<UserControl>
<DockPanel>
<StackPanel DockPanel.Dock="Top">
<ToolbarTray> <Toolbar/> <ToolbarTray/>
<Some Other UI Stuff, separators, text, etc/>
<StackPanel/>
<StackPanel DockPanel.Dock="Top">
<ToolbarTray> <Toolbar/> <ToolbarTray/>
<Some Other UI Stuff, separators, text, etc/>
<StackPanel/>
<!-- as the above toolbars expand in size, these two are pushed offscreen>
<StackPanel DockPanel.Dock="Bottom">
<Some Other UI Stuff, separators, text, etc/>
<StackPanel/>
<DockPanel/>
<UserControl/>
My question is, how can I make the Toolbar controls show as many buttons as possible? They overflow into a dropdown menu when full, but currently their MaxHeight values are all hard coded. I am looking to make this dynamic, so the maximum number of buttons appear depending on the size of the monitor. I've tried doing so by removing the height restrictions, but then the last StackPanel always just gets forced off screen.
Notice that the last StackPanel MUST reside on the bottom of the DockPanel, and contains no toolbar but only some other UI elements.
You should place the area with the highest priority first in your dockpanel.
You can test this with the following very primitive setup (place in a WPF window and resize height, observe in which order the controls are expanded / shrinked):
Your current way:
<DockPanel>
<Rectangle DockPanel.Dock="Top" Fill="Green" Height="100"/>
<Rectangle DockPanel.Dock="Bottom" Fill="Red" Height="100"/>
<!-- Last one fills -->
<Rectangle Fill="Orange"/>
</DockPanel>
Let bottom keep its size and shrink top first
<DockPanel>
<Rectangle DockPanel.Dock="Bottom" Fill="Red" Height="100"/>
<Rectangle DockPanel.Dock="Top" Fill="Green" Height="100"/>
<!-- Last one fills -->
<Rectangle Fill="Orange"/>
</DockPanel>
A typical problem with this approach is the tab-order. You can keep the screen visible tab order as follows:
<DockPanel KeyboardNavigation.TabNavigation="Local">
<Rectangle DockPanel.Dock="Bottom" Fill="Red" Height="100" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="3"/>
<Rectangle DockPanel.Dock="Top" Fill="Green" Height="100" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="1"/>
<!-- Last one fills -->
<Rectangle Fill="Orange" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="2"/>
</DockPanel>
I use the rectangles to make different areas and the priority of their resizing visible - you can place any of your controls in place of the rectangles.
Edit: regarding the comment mentioning fixed size and two relative sized areas (I took the freedom to ignore the 20%, 30% and only look at the ratio), a grid might be the better choice:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="Green"/>
<Rectangle Grid.Row="1" Fill="Orange"/>
<Rectangle Grid.Row="2" Fill="Red" Height="100"/>
</Grid>
Regarding rotation: one way would be to swap the row and column definitions... make sure to include all relevant properties in the swap.
<Grid x:Name="myGrid" Margin="0,0,0,40">
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="Green"/>
<Rectangle Grid.Row="1" Grid.Column="0" Fill="Orange"/>
<Rectangle Grid.Row="2" Grid.Column="0" Fill="Red" MinHeight="100" MinWidth="100"/>
</Grid>
<Button VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10" Content="Change Rotation" Click="Button_Click"/>
Code behind to swap grid rows and columns:
private void Button_Click(object sender, RoutedEventArgs e)
{
var rd = myGrid.RowDefinitions.ToList();
var cd = myGrid.ColumnDefinitions.ToList();
myGrid.RowDefinitions.Clear();
myGrid.ColumnDefinitions.Clear();
foreach (var item in cd)
{
myGrid.RowDefinitions.Add(new RowDefinition() { Height = item.Width });
}
foreach (var item in rd)
{
myGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = item.Height });
}
foreach (UIElement child in myGrid.Children)
{
var r = child.GetValue(Grid.RowProperty);
child.SetValue(Grid.RowProperty, child.GetValue(Grid.ColumnProperty));
child.SetValue(Grid.ColumnProperty, r);
}
}
It would also be possible to define different data templates for original and rotated view. It all depends on the requirements and complexity of involved controls.
Another alternative idea: lets actually rotate the view including its content... that might help if the parent container is not rotated:
private bool isRotated = false;
private void Button_Click(object sender, RoutedEventArgs e)
{
if (!isRotated)
{
myGrid.LayoutTransform = new RotateTransform(90, myGrid.ActualWidth / 2, myGrid.ActualHeight / 2);
}
else
{
myGrid.LayoutTransform = Transform.Identity;
}
isRotated = !isRotated;
}
I've been trying to have one canvas with two layers. One layer scrolls horizontally, the second one is on top and scrolls vertically.
In the second layer (the one that scrolls vertically), I stacked a transparent grid (or panel) and a panel with information so that we can see the first layer that is under this one and if we scroll up, we have the information that appears on the screen.
That works like a charm except that if I scroll horizontally, the first layer (the one under) does not scroll at all. It's not a problem if the vertical scrolls does not scroll if we swipe the transparent grid.
This is my xaml
<Canvas x:Name="Canvas">
<local:MyPage x:Name="PageContainer"/> <!--This one scrolls horizontally -->
<ScrollViewer
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Hidden"
Height="{Binding ActualHeight, ElementName=UcRoot}">
<!--This one scrolls vertically and appears on top -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1">
</Grid>
</Grid>
</ScrollViewer>
</Canvas>
I tried many things on the transparent grid (setting width to 1, removing it and setting the information grid margin top to 1200 for example) but the grid captures the event and does not relay to my page.
Can I get some help?
Thanks!
You have to set the background to 'Transparent' to the grid in order to be able to tap on it and swipe.. and you maybe need these properties to play with:
ScrollViewer.VerticalScrollMode
ScrollViewer.HorizontalScrollMode
Although, this is my suggested solutions:
<ScrollViewer ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" >
<Grid >
<TextBlock Text="contnet" />
</Grid>
</ScrollViewer>
<ScrollViewer ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled" >
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" Background="Transparent" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Canvas>
Whenever Expander is expanded I would like to shrink grid cell above containing ListBox, so that you can always access every ListItem(if the listbox's grid cell would not shrink, lowest part would be inacessible). To illustrate:
item item *scrollbar*
item -> item *scrollbar*
item expanderItems
expander expander
I found bunch of threads for resizable expander, but none mentioning resizing other content. The problem is, grid containing listbox in 1st row and expander in 2nd with 2nd row Height set to Auto do not resize itself when expander is expanded.
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
I managed to code an ugly workaround using Expanded/Collapsed events:
private void Expander_Expanded(object sender, System.Windows.RoutedEventArgs e)
{
//grid1.Height is named content of expander
this.LayoutRoot.RowDefinitions[1].Height = new GridLength(this.LayoutRoot.RowDefinitions[1].ActualHeight + grid1.Height, GridUnitType.Pixel);
this.LayoutRoot.RowDefinitions[0].Height = new GridLength(1, GridUnitType.Star);
}
What would be the proper way? Preferably with no code behind and more "automated".
EDIT: xaml
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Expander Header="Expander" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Height="23" Panel.ZIndex="1" ExpandDirection="Up" Grid.RowSpan="2" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
<Grid x:Name="grid1" Background="#FF762CF7" Height="100" Margin="0,-100,0,0"/>
</Expander>
<ListBox Margin="0" Background="#19FFFFFF">
<Button Height="150" Width="100"/>
<Button Height="150" Width="100"/>
<Button Height="150" Width="100"/>
</ListBox>
<Grid Margin="0" Grid.Row="1" Background="#FFAEFFAE"/>
<Grid Margin="0" Background="#FFFFD8D8"/>
</Grid>
The main problem you have is setting the Height property of the Expander. It changes its height when you expand it. But if you are setting it, it has to respect the height you gave it and cannot properly expand.
Instead of setting the Height, I would set the MinHeight (or completely remove height constraints, depending on what you want to do).
Additionally you should remove the Margin of the grid inside the expander.
I'm developing an application using WPF by c#.
I have 2 frames next to each other. The above will not change and just updated(like Facebook toolbar).
The bottom frame will change by clicking on some buttons. (it is something like masterpage in ASP).
I don't want to set a height and width for window or for frames. The problem is when I make the window full screen there is a space between two frames.
However none of the vertical/horizontal alignment stretch does not work.
<window>
<Frame VerticalAlignment="Top" Background="Crimson" />
<Frame VerticalAlignment="Bottom" Background="Black"
/>
</Window>
I want to create something like the this site as you see. the notify section and the main page.
EDIT:
i can put them next to each other just by set the height, but when i make full the window the heights stay and the yellow space becomes appear, so i want to find a way to put them Exactly next to each other in every window size.
As Mitch noted in the comments, you could place the two frames in a grid instead, and let the grid size the items.
<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>
</Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>