I am creating silverlight video player.
I have organized my player as grid.
First row is video, second and third are control panels with buttons.
When I switch to fullscreen mode I want to set specified image on the top.
So i load image, resize and can't make this image to cover all elements(video,panels).
I try to make this image only visible, and cant do that.
I think there is possible to create an "element" and set it somehow to cover.
I would like do this like splash because i guess collapsing my rows isn't good idea.
Thanks in advance.
You should be able to do this by first making sure your image element is the last child in the Grid and by adding Grid.RowSpan value to it containing the number of rows in the grid:-
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<MediaElement ... />
<StackPanel Orientation="Horizontal" Grid.Row="1">...</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="2">...</StackPanel>
<Image Source="SomeImageUrl" Grid.RowSpan="3" />
</Grid>
An alternative to placing the Image at the end of the Grid's child list is to give it a higher ZIndex using rather unintuitively Canvas.ZIndex property.
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
I've come accross some .xaml code I need to fix. Currently, it's made of 2 grid components with this layout:
<Grid d:SomeDataContext>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListView Style="{StaticResource SomeListStyle}" Grid.Row="0" Margin="0,0,0,0" Grid.RowSpan="2">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" Margin="0,0,0,80" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<mycontrol:Panel1Control />
<mycontrol:Panel2Control />
<mycontrol:Panel3Control />
<mycontrol:Panel4Control />
<mycontrol:Panel5Control />
</ListView>
<controls:HeaderControlTransparent Grid.Row="0" />
</Grid>
When this xaml is interpreted, in run time you get a nice list scroller made up of Panel1, Panel2, etc... On top of that, there's some transparent header aligned to the top of the screen.
In fact, this header is "SO aligned" it doesn't move when scrolling, but floats.
The desired placement is something like:
[Header]
[Panel1]
[Panel2]
[Panel3]
[Panel4]
[Panel5]
And the desired behaviour when someone scrolls, shoule be the [header] element disappearing from the upper part of the screen as if it was one of the other panels.
Desired (not happening)
...
[Panel3]
[Panel4]
[Panel5]
Undesired (happening)
[Header]
[Panel4]
[Panel5]
Currently the header doesn't scroll and it just floats on top of everything, aligned to the top part of the screen, while the panels scroll.
Any hint I should be addressing? I think everything is in order. I can't see why one row of the grid scrolls and the other doesn't.
I'm kind of new to .xaml so, this may also be one of the reasons of my troubles.
Thanks.
So may as well add a little to the comment for some additional explanation to future readers and apparently some easy points.
In your example there's two rows (for I guess some other reason) of the Grid with both of the children within the same cell. Since the Header control part sits underneath the ListView in the DOM then it's rendered logically on top of the underlying ListView.
A ListView already as a ScrollViewer built into the control template to nest its items in. However the OP requires elements outside of the controls template to scroll with the items in the ListView.
So by Embedding both the ListView and the Header control in the right order within their own parent ScrollViewer, the desired result can be had of scrolling both bits of content.
e.g. (in pseudo)
<Grid>
<ScrollViewer>
<objects2/>
</ScrollViewer>
<object1/>
</Grid>
Would float object 1 over top of objects 2 and keep object 1 stationary while everything else scrolls. However;
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<object1/>
<objects2 Grid.Row="1"/>
</Grid>
</ScrollViewer>
Will scroll all the children keeping their stacked location.
Hope this helps, cheers!
I'm having trouble vertically sizing the CheckListBox control from https://wpftoolkit.codeplex.com/. I'm a week-old newbie in WPF, so this is probably a general issue with (vertical) sizing.
Given my grid, I want the first 5 rows to size whatever size, they need to be, and in my viewport, I want the CheckListBox control in row 6 to simply fill the remaining space vertically.
My problem is, that when I fill the CheckListBox with a lot of elements, the control just expands / overflows the viewport. What I want it to do, is to assume the height of the remaining space vertically, which will make it display an inner scrollbar.
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Row="0">Some title</Label>
<RadioButton Grid.Row="1" GroupName="NameSortRadioButtonGroup">Firstname Lastname</RadioButton>
<RadioButton Grid.Row="2" GroupName="NameSortRadioButtonGroup">Lastname, Firstname</RadioButton>
<TextBox Grid.Row="3" Margin="0,5" />
<Label Grid.Row="4" Content="{Binding ElementName=MyCheckListBox, Path=SelectedItems.Count}" />
<xctk:CheckListBox
Grid.Row="5"
Name="MyCheckListBox"
VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
Height="Auto"
/>
</Grid>
I have left out some parent elements to simplify. The Grid is in a grid, that's in a canvas, that's in a grid, and this outer grid is direct child of the Window element.
I have tried wrapping the CheckListBox control in a StackPanel with Height="Auto" (to eliminate the possibility of a bug in the CheckListBox) and also here to set the height of the CheckListBox using
Height="{Binding ElementName=CheckListBoxStackPanelWrapper, Path=ActualHeight}"
I also initially tried to do the whole thing with first a StackPanel and later a DockPanel instead of the Grid control.
In all cases, the CheckListBox just flows out of the window/viewport. If I give it an explicit height, it behaves correctly, but I obviously want my window to be resizable.
What shall I do?
To sum up comments because your outer control is a Canvas which does not restrict its child elements From MSDN:
Child elements of a Canvas are always given the full size that they desire
which means that Grid will be given as much space as it require. One solution is to remove the Canvas part or restrict the size size of Grid or expanding row
I have a ScrollViewer which includes a lot of content (datagrids, stackpanels, textboxes, labels, etc...), and outside of it I want to add a button (PRINT), and it is important that the button is not part of the ScrollViewer. My goal is that the top 90% of my screen is the scrollviewer and the bottom 10% is a "frozen panel" that always shows the PRINT button, and this should remain true when maximized and minimized.
After having a lo of problems with 'the property content is set more then once' I realized I need to add both my ScrollViewer and the Button inside another container, so far the only one that seems to work is GRID - but honestly after you read this if you have anything else to recommend I am open to suggestions, I only used GRID because it seemed to almost give me what I wanted.
This is my code right now:
[Code]
<Window DataContext="{Binding PrintView, Source={StaticResource Locator}}" Width="900">
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer Name="PrintView" Grid.Row="0" Height="Auto">
<StackPanel>
... a LOT of stuff ...
</StackPanel>
</ScrollViewer>
<Button Content="Print"
Margin="0,20,0,20"
Height="50"
Width="150"
FontSize="24"
FontWeight="Bold"
Grid.Row="1"
/>
</Grid>
</Window>
[Code]
When done like this my ScrollViewer doesn't have a Scrollbar so I see the first page but I cannot scroll down, also there is no PRINT button seen
One interesting test was to change the following:
<ScrollViewer Name="Apercu" Grid.Row="0" Height="600">
Now I see my scrollbar again (and I can scroll) and my PRINT button is beneth it and always visible (this is almost perfect) but when I maximumize my window the ScrollViewer stays 600 of height and as such well it doesn't acctually maximize (everything below the PRINT button is just white).
Any ideas? Is there another way I could specify my HEIGHTS or is there a different control I should be using (not GRID)?
Thanks,
Found it ...
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
And remove height from ScollViewer
All,
I'm trying to make the silverlight app I'm making resize in a reasonable manner. To do this, I thought I would use a dynamic grid. In the center of the grid I need to put an image inside of a canvas because I will dynamically be positioning objects on top of it. Ideally, as the user makes the browser window larger, the center column would be able to resize and grow larger, thereby growing the image.
Here's what I've got:
<Viewbox Grid.Row="0" Grid.Column="1">
<Canvas x:Name="cvsCenterPane">
<Image x:Name="imgFormImage" MouseLeftButtonDown="imgFormImage_MouseLeftButtonDown"
MouseLeftButtonUp="imgFormImage_MouseLeftButtonUp" MouseMove="imgFormImage_MouseMove" />
</Canvas>
</Viewbox>
In the code behind, I then set the image source.
Here's my grid definition:
<Grid x:Name="LayoutRoot" Background="DarkCyan" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
I think there must be some sort of unhandled exception occurring during the construction of the Viewbox because the image does not display at all. What am I doing wrong here? Am I taking the wrong approach?
There is no exception, the canvas just does not have any set dimensions which is a requirement when you want to use a ViewBox.
I for one would not use a canvas, you can stick with the grid since you can place more than one control in a cell and if you need to move the objects around you can use the Margin or a TranslateTransform in the RenderTransform property.
This does not work because you cannot set the x:Name attribute of children in a Viewbox with silverlight. At least according to a few sources:
http://blog.ningzhang.org/2008/11/viewbox-control-in-silverlight-toolkit.html
http://forums.silverlight.net/forums/p/48535/128830.aspx
http://forums.silverlight.net/forums/p/45789/123941.aspx#123941
this seems to be by design. A few workarounds have been suggested, so I will try them.
Edit: HB seems to be correct, there is no exception, the Canvas needed to have dimensions set.