I can't make the ScrollViewer in WPF while using Caliburn Micro MVVM work! https://github.com/moon1234moon/Factures
Here is my XML code:
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top"
MaxHeight="900"
MaxWidth="900"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<!-- Deleted because they are quite a lot -->
<ContentControl Grid.Column="3" Grid.Row="1" Grid.RowSpan="5"
x:Name="ActiveItem"
Margin="30, 150, 30, 30"
/>
</Grid>
</ScrollViewer>
Of-course I tried making the scroll enabled IsEnabled = true and added VerticalAlignment and HorizentalAlignment to it but non of that seemed to work!..
Please Help!! PS: The most important part is for me to be able to scroll horizontally to see the content of the ContentControl
And here is the result:
Image shows scroll to be not enabled
1) put off the command MaxHeight and MaxWidth from your view which is usercontrol
2) put off the scrollviewer of the same view and define scrollviewer in the main window (shellview i suppose). The main window contents all usercontrols
3)all will be ok
Related
I would like to nest a group of columns inside a greater container column. I was intending on using a grid for this but am open to suggestions. I would like the result to look as follows in that row 1 col 1 and row 2 col 1 have sub columns 1a, 1b, 1c, and, 1d.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="row0" Height="35"></RowDefinition>
<RowDefinition Name="row1" Height="20"></RowDefinition>
<RowDefinition Name="row2" Height="35"></RowDefinition>
<RowDefinition Name="row3" Height="35"></RowDefinition>
<RowDefinition Name="row4" Height="35"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="col0" Width="75"></ColumnDefinition>
<ColumnDefinition Name="col1" Width="400"></ColumnDefinition>
<ColumnDefinition Name="col2" Width="75"></ColumnDefinition>
</Grid.ColumnDefinitions>
Nested Grids do work, however ColumnSpan will keep your different columns lined up if you have dynamic content.
In my example below I created three new columns for the middle section.
Then for columns like row 0 col 1, I simply told it to span across 4 columns
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="row0" Height="35" />
<RowDefinition Name="row1" Height="20" />
<RowDefinition Name="row2" Height="35" />
<RowDefinition Name="row3" Height="35" />
<RowDefinition Name="row4" Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="col0" Width="75" />
<ColumnDefinition Name="col1" Width="75" />
<ColumnDefinition Name="col2" Width="125" />
<ColumnDefinition Name="col3" Width="125" />
<ColumnDefinition Name="col4" Width="75" />
<ColumnDefinition Name="col5" Width="75" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" />
<TextBox Grid.Row="1" Grid.Column="1" />
<TextBox Grid.Row="1" Grid.Column="2" />
<TextBox Grid.Row="2" Grid.Column="0" />
<TextBox Grid.Row="2" Grid.Column="4" />
<TextBox Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="4" />
</Grid>
Just add the another grid and add it to a certain grid cell on the parent container. (If nested is the way you want to go)
<Grid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="1" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
Instead of nesting grids I suggest using only one grid and defining Grid.ColumnSpan="4" on the content of row0col1, row3col1 and row4col1.
I've created a TabItem with a default layout that have 3 columns and one row. Inside the first column I've inserted a StackPanel and put inside another Grid that have 3 columns and 3 rows. Now the problem's that inside the second Grid I've created a GroupBox with a StackPanel and I've set Grid.Column="2" but the controls inside the GroupBox doesn't go in the second column of the second Grid and I don't know what am I doing wrong. This is my code:
<TabItem Header="Confronto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GroupBox Header="Informazioni Squadre" Height="Auto" Grid.ColumnSpan="3" Grid.RowSpan="3">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Column="2">
<Label Content="Inter" FontWeight="Bold"></Label>
<Canvas Height="75" Width="75" Background="Gray"></Canvas>
<Label Content="Italia" Margin="0,15,0,0"></Label>
<Label Content="Serie A" Margin="0,10,0,0"></Label>
<Label Content="97%" Margin="0,10,0,0"></Label>
</StackPanel>
</GroupBox>
</Grid>
</StackPanel>
</Grid>
</TabItem>
As mentioned in the comment you can set Grid.Column and Grid.Row only on direct children of the Grid. Your inner Grid has only one direct child (GroupBox) and Grid.Column \ Grid.Row will work only on that element.
You can reverse the order and put inner Grid inside GroupBox. As a side not Grid.Column="2" will put it in the 3rd column of the inner Grid not the second (it's indexed from 0)
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<GroupBox Header="Informazioni Squadre" Height="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Column="2">
<Label Content="Inter" FontWeight="Bold"></Label>
<Canvas Height="75" Width="75" Background="Gray"></Canvas>
<Label Content="Italia" Margin="0,15,0,0"></Label>
<Label Content="Serie A" Margin="0,10,0,0"></Label>
<Label Content="97%" Margin="0,10,0,0"></Label>
</StackPanel>
</Grid>
</GroupBox>
</StackPanel>
</Grid>
I am trying to limit the height of a DockPanel (well the content acually) to the remaining UserControl Height with a ScrollViewer in it to scroll if its too big.
I have a window wich uses a ContentController to hold the different UserControls
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!-- 0 Menu -->
<RowDefinition Height="auto"/>
<!-- 1 Header -->
<RowDefinition Height="65"/>
<!-- 2 Content -->
<RowDefinition Height="*"/>
<!-- 3 Space -->
<RowDefinition Height="10"/>
<!-- 4 Status line -->
<RowDefinition Height="auto"/>
<!-- 5 Space -->
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<!--...-->
<ContentPresenter Content="{Binding Path=MainWindowContent}" Grid.Column="0" Grid.Row="2"/>
<!--...-->
</Grid>
</Window>
The UserControl wich I having trouble with is just a search for users and the output of the results. It does look like this:
<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="25"/>
<RowDefinition Height="auto" />
<RowDefinition Height="10" />
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- input fields -->
<DockPanel Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="6" LastChildFill="True" VerticalAlignment="Stretch" Background="{StaticResource PrimaryCorporateBrush}">
<TextBlock Style="{StaticResource HeadlineOutputLabel}" DockPanel.Dock="Top"/>
<Separator Opacity="0" Height="10" DockPanel.Dock="Top"/>
<TextBlock Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2RevertedVisibility}}" Margin="10" DockPanel.Dock="Top"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2Visibility}}">
<ItemsControl ItemsSource="{Binding Path=Members}" VerticalAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Tag="{Binding}">
<!-- Result Element -->
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
</Grid>
</Border>
</Grid>
<Grid Grid.Column="3" Grid.Row="1">
<!-- info display -->
</Grid>
</Grid>
</UserControl>
I intent to limit the Results ScrollViewer height to the remaining visible space of the window, and if the results exceed it to display a scrollbar. But right now the DockPanel keeps extending the ScrollViewer and nested ItemsControl height till all elements are placed but does NOT show the ScrollBar.
I am a bit lost here why it does that, shouldn't the DockPanel limit the Height to the visible space? tried it with putting buttons instead of ItemsControl, nothing no ScrollBar.
I found the solution!
Further up in the Grid structure there was a row set to "auto" instead of "*" and ScrollViewer seems to only function properly with latter.
I'm using a ScrollViewer to enable the Grid that it contains to be scrollable. However, when I let go after scrolling down, it will automatically scroll back to the top of the Grid.
<ScrollViewer>
<Grid ShowGridLines="false" MinHeight="700">
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="{Binding Pivot1Rows[0].RowHeight}" />
<RowDefinition Height="1" />
<RowDefinition Height="{Binding Pivot1Rows[1].RowHeight}" />
<RowDefinition Height="1" />
<RowDefinition Height="{Binding Pivot1Rows[2].RowHeight}" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Stackpanels for each row/column combo here -->
</Grid>
</ScrollViewer>
Any idea what I need to add/change to ensure the position within the Grid scrolled down to is maintained even after I let go?
You have to set the height of the ScrollViewer to be less than that of the Grid. If the ScrollViewer is larger than it's child, the child will always bounce back to it's original position.
I am new to WPF, my question is :
I have an application in which there is a circle object which carries some information and I would like to drag and drop it.
My problem is when i run it on my computer it works fine, but when I change the screen size circle object shape get distorted and become ellipse.
I am using grids with 5 rows and column with equal ratio(*).
Is it something when screen size changes its inch(physical size) length != breadth.
Please give your expert advice.
(Edit1 : Tried in Canvas, in canvas circle looks like circle irrespective of any screen but wondering how this is implemented in grid !)
`
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="257*" />
<RowDefinition Height="121*" />
<RowDefinition Height="442*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="520*" />
<ColumnDefinition Width="121*" />
<ColumnDefinition Width="865*" />
</Grid.ColumnDefinitions>
<Ellipse Name="ellipse2" Stroke="Black" Grid.Row="1" Grid.Column="1" /> </Grid>
`
I know I am doing wrong as when resolution changes ratio changes which gives different physical units for different screen. Please suggest the better way using grids.
(Edit2 : According to ben solution here below is the result comparison, in my case example 3 i wuld prefer, but had to take care abt that stroke somehow!!)
http://i.stack.imgur.com/1QpRR.jpg
Another way to zoom up circle without distortion is apart from viewbox:
'
<Grid.RowDefinitions>
<RowDefinition Height="257*" />
<RowDefinition Height="121*" />
<RowDefinition Height="442*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="520*" />
<ColumnDefinition Width="121*" />
<ColumnDefinition Width="865*" />
</Grid.ColumnDefinitions>
<Ellipse Stroke="Black" Grid.Row="1" Grid.Column="1" Stretch="Uniform" />
'
Unlike Viewbox which place circle in the middle of the grid, this Stretch = "Uniform" stretches the circle and place it left of the grid. But shape remain same for all screens.
Its basic, I dont knw how I forget this.
Well, i'm not really sure of what you're trying to do, so here are several solutions. They all use Grid since you specifically asked for it. However, I'm not convinced that it's really appropriate.
Your problem is that the Ellipse size is determined by the Grid, and there is no constraint to force the aspect ratio. So the aspect not only changes when the screen resolution is different, it also changes when you resize the window.
Solution 1 : set Width and Height of the Ellipse
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="257*" />
<RowDefinition Height="121*" />
<RowDefinition Height="442*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="520*" />
<ColumnDefinition Width="121*" />
<ColumnDefinition Width="865*" />
</Grid.ColumnDefinitions>
<Ellipse Stroke="Black" Grid.Row="1" Grid.Column="1" Width="20" Height="20" />
</Grid>
Solution 2 : set the Width and Height in the Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="257*" />
<RowDefinition Height="20" />
<RowDefinition Height="442*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="520*" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="865*" />
</Grid.ColumnDefinitions>
<Ellipse Stroke="Black" Grid.Row="1" Grid.Column="1" />
</Grid>
Solution 3 : use a ViewBox
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="257*" />
<RowDefinition Height="121*" />
<RowDefinition Height="442*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="520*" />
<ColumnDefinition Width="121*" />
<ColumnDefinition Width="865*" />
</Grid.ColumnDefinitions>
<Viewbox Grid.Row="1" Grid.Column="1">
<Ellipse Stroke="Black" Width="20" Height="20" />
</Viewbox>
</Grid>
Solution 4 : bind ellipse Width and Height together
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="257*" />
<RowDefinition Height="121*" />
<RowDefinition Height="442*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="520*" />
<ColumnDefinition Width="121*" />
<ColumnDefinition Width="865*" />
</Grid.ColumnDefinitions>
<Ellipse x:Name="ellipse" Stroke="Black" Grid.Row="1" Grid.Column="1"
Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}" />
</Grid>
Differences
Solution 1 and 2, both give a constant size to the circle, whatever the Grid size is.
Solution 3 and 4, both resize the circle depending on Grid size.
Solution 3 will also change the thickness of the stroke, whereas solution 4 wont.
EDIT: Fixed solution 4