I have a grid splitter that works good. On the left side of the splitter i am trying to have a table with a bunch of images that when the splitter is is moved to the right the images stretch. Which this works fine. However, when the splitter is moved to the left i want the images to move into eachother and when they get there i want the splitter to move over them to make them dissapear. What it does now is the images just squish together until they dissapear. I built a table. I will include some table code and some pics of the behavior i wnat and what its doing. I am trying to replicate the googles kitchen sink example.
I am trying keep this post small
<Grid Background="#FFF8F5F5" ShowGridLines="true" FlowDirection="RightToLeft">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="104*" />
<RowDefinition Height="91*" />
<RowDefinition Height="14*" />
<RowDefinition Height="104*" />
<RowDefinition Height="104*" />
</Grid.RowDefinitions>
<Image Grid.Column="1" Margin="53,3,41,0" Source="google.png" Stretch="Fill" />
<Image Grid.Row="3" Margin="59,4.4,50,0" Source="google.png" Stretch="Fill" />
</Grid>
Here is what i want it to do when move the splitter to the left
and to the right
but this is what it is doing when i move the splitter to the left..
As you can see the images are just scrunching together. Can i do this with tables or do i need a different layout?
Do not set Stretch to Fill but Uniform, also set a fixed size on the Images themselves.
Related
I am writing a canvas program, where on scale of canvas , it is occupying the row above to it. I understand this is a normal behavior that XAML read topdown.
So i am re-arranging the top row of the grid to the bottom of the document, I could able to overcome with the problem.
When i same the document, document format pref is making back to the top of the document.
Is there any thing like Zindex kind to keep the row on top most irrespective of the location in the document.
Example :
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
<Label Grid.Row="0"/>
<Canvas Grid.Row="1"/>
<Label Grid.Row="2"/>
When i Zoom Canvas, it is covering the label in Grid.Row="0".
Got it! It is Panel.ZIndex="<number>". Thank you
Been looking around on the internet and I think more people talk about docking images etc... to the screen. What I am looking for is that I want the images and everything else on the page to stretch or shrink depending on the persons resolution?
I Havant set my screen to a height or width, I just set the screen to maximise on page load but this doesn't seem to work?
Does anyone have a solutions on this i am using a WPF Application.
You can put all your controls below the Window in a ViewBox. That will scale your whole window content.
While the ViewBox control is good for resizing UI elements, there is a preferable way to achieve the same goal. UIs in WPF are generally created using Grid controls. These enable developers to take advantage of the resizing abilities that they provide. Virtually all 'fit to size' applications use Grid elements.
When using Grid elements with the objective of filling all of the available space, there are a few things that you should consider. You generally shouldn't use exact widths and/or heights, instead using the "Auto" setting. Also, you must have at least one column and/or width dimension set to "*"... this will take up all of the remaining space:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Top left" Background="LightSeaGreen" Padding="20" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Bottom left" Background="LightBlue" Padding="20" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="Top right" Background="LightGreen" Padding="20" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="Bottom left" Background="LightCoral" Padding="20" />
</Grid>
I've just inherited an old WinForms app with a UI layout like this:
I'm tasked with updating several things about the software one of which is porting it to WPF which I've not previously worked with. I'm also told that the new WPF UI must look identical to the existing UI layout so I'm trying to figure out how to create that layout in WPF. I need a toolbar across the top of the window which stretches the entire width of the fixed-size window. Can I do that in the default grid or do I need a dockpanel to do that? Also, I'm assuming that I would use a grid with 2 columns and 3 rows to layout the six groupboxes?
Anything you can do with a DockPanel can also be done with a Grid -- the DockPanel is just a shortcut. So yes, you can do all this with the default Grid.
As for how to do the layout: it depends on how you want things to resize. Does everything stay proportional when you resize? If so, a single Grid with three columns (and percentage sizes for the ColumnDefinitions) would be fine. You would actually need four rows, though, not three -- the first RowDefinition would be for the ToolBar (using ColumnSpan="3") and would need Height="Auto" so it uses the ToolBar's default size; the remaining rows would be percentage-sized.
Try that, see if it works for you. If the resizing needs to be more complicated than just proportional, then post a second screenshot of the window at a different size, and we could try to help you further.
Personally I would use a DockPanel for the Menu/Content areas, then use a Grid in the Content Area to define the GroupBoxes
<DockPanel>
<Grid x:Name="MenuRegion" DockPanel.Dock="Top" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Grid Grid.Row="0" Grid.Column="2" />
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
<Grid Grid.Row="1" Grid.Column="2" />
<Grid Grid.Row="2" Grid.Column="0" />
<Grid Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
</DockPanel>
Of course, you could also make the Menu area part of the Grid and set it to span all rows, but I personally like keeping them separate.
Grid with 3 row (one for the menu). Since you have uneven spacing in the rows just a single column on the main grid. Then grid in the grid for the two column spacings.
I need table with both horizontal and vertical header (simple PivotGrid). I have found some similar (or almost same) problems here, but no one give the solution. In XAML I have defined this structure:
<Grid x:Name="grdMain" Background="White" Grid.IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="1" x:Name="grdHorizontalHeader">
<!-- place for column definitions and header labels defined in code -->
</Grid>
<Grid Grid.Row="1" Grid.Column="0" x:Name="grdVerticalHeader">
<!-- place for column definitions and header labels defined in code -->
</Grid>
<Grid Grid.Row="1" Grid.Column="1" x:Name="grdContent">
<!-- place for column definitions and header labels defined in code -->
</Grid>
</Grid>
So both header consist of grid with some ColumnDefinitions (resp. RowDefinitions) and I need to size Header-ColumnDefinitions according to Content-ColumnDefinitions. I do it in code:
foreach (var row in myColumnSource)
{
// Content columns definitions
var cD = new ColumnDefinition();
cD.Width = GridLength.Auto;
cD.SharedSizeGroup = "ColumnSharedSizeGroup" + row.Value;
this.grdContent.ColumnDefinitions.Add(cD);
// Header columns definitions
var cD2 = new ColumnDefinition();
cD2.Width = GridLength.Auto;
cD2.SharedSizeGroup = "ColumnSharedSizeGroup" + row.Value;
this.grdHorizontalHeader.ColumnDefinitions.Add(cD2);
...
So Header-Column should share it's Width with Content-Column. But when I run the program, the columns are bouncing and resizing in infinite loop. Row's height sharing work fine. Where could be the problem?
EDIT only columns in header (grdHorizontalHeader) are resizing. Columns in grdContent have correct and stable width.
The Grid control's algorithm for auto-sizing can be finicky sometimes.
Have you tried setting a MinWidth on each of your columns/rows?
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="30" />
<ColumnDefinition Width="Auto" MinWidth="30" />
<ColumnDefinition Width="Auto" MinWidth="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="15" />
<RowDefinition Height="Auto" MinHeight="15" />
<RowDefinition Height="Auto" MinHeight="15" />
</Grid.RowDefinitions>
Not super elegant, but fixed this same problem for us.
If one grid has many SharedSizeGroup columns, the resulting layout performs an exponentially increasing number of passes to try and sort them out. Someone somewhere said Microsoft acknowledged the bug, but I couldn't find details of it.
To solve the issue, I broke my grid up into smaller grids inside a StackPanel. This made the layout fast again and retained the shared sizing.
As your grid is two dimensional, this would be harder. As you are adding controls dynamically, perhaps you could have one vertical StackPanel holding horizontal StackPanels holding smaller Grids?
Say I have a grid with 3 rows. In the center row I'd like to put an image and then center it in that row vertically and horizontally. But since (I think) Silverlight uses upper left corners of an element when it centers, the upper left corner of the image is centered when I tell it to center vertically/horizontally.
I've seen 2 approaches to this:
modify the image position in an event
set the image's margin to a very large number on all sides (500)
Is there an easier way? Seems kinda weird that you'd need to do something hacky like those 2 approaches. I'd prefer to just tell the thing that its anchor is in the center and then tell it to center. Hmmm, could be a good custom control.
Update: the really obnoxious thing about this was when I made a minor change to the page to change how that image was centered and FF3 displayed an old version of the page. Which made me think that it didn't work. Then I pulled it up in IE and it looked right. I flushed FF3's cache and it displayed the right page. Damn annoying.
Why wouldn't this work for you?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="Butterfly.jpg"
Height="50" Width="50"
HorizontalAlignment="Center" VerticalAlignment="Center"
Stretch="UniformToFill"
Grid.Column="1" Grid.Row="1" />
</Grid>