I am trying to get a FlipView streched to the height of its parent view. The XAML look like this:
<StackPanel Orientation="Vertical">
<FlipView x:Name="flipView"
BorderBrush="Black" BorderThickness="1"
VerticalAlignment="Stretch"
SelectionChanged="FlipView_SelectionChanged" >
<!-- Use a vertical stack panel for vertical flipping. -->
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
</FlipView>
<TextBlock x:Name="textOutput" Text="Hello"></TextBlock>
</StackPanel>
The children of the FlipView were added in C#:
var image1 = await MakeImageForPageIndex(1);
var image2 = await MakeImageForPageIndex(2);
flipView.Items.Add(image1);
flipView.Items.Add(image2);
As you can see in the screenshot the vertical next button and the bottom border are clipped.
I have tried setting VerticalAlignment of the FlipView to Strech with no luck. Setting the images a small Height didn't help either.
I have also tired Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}" from this question
Thank you all!
StackPanel stacks its children in one direction (vertical in this case), its size grows with its children, it does not define a bound for its children.
Use a Grid to replace the StackPanel.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<FlipView x:Name="flipView" />
<TextBlock Grid.Row="1" />
</Grid>
Related
I created a WPF project in which I need display two StackPanels like this:
This screen is child of main Grid
StackPanel 1 will be displayed without any alternation of width and height and I need to display the entire second StackPanel on top of previous StackPanel. Using Canvas and DockPanel doesn't help me in this case.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1">
<wv2:WebView2 Name="MyWebView"
Height="800" >
</wv2:WebView2>
</StackPanel>
<StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
<Canvas >
<local:VideoPlayer x:Name="videoPlayer" Background="AntiqueWhite"/>
</Canvas>
</StackPanel>
</Grid>
I agree with #thatguy answer , if we use the zIndex we can overlap the element in WPF, But the question here is related to webview2 and mediaElement.
As of now webview2 not allow another element to come on top.
So there is no way to display your mediaElement on top of webview as of now.
Reffer to this Link for this issue : Webview2 issue
You can try to display mediaElement using popup but this will give other problems
I think this is the only answer to your question right now .
The order in which you define the StackPanels inside the Grid matters. The next item is displayed above the previous one. In your example, videoPlayerPanel will be above web1, because it is defined after web1. There are two options to alter this behavior.
Change the order, define videoPlayerPanel before web1, to display web1 above videoPlayerPanel.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
<Canvas >
<local:VideoPlayer x:Name="videoPlayer" Background="AntiqueWhite"/>
</Canvas>
</StackPanel>
<StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1">
<wv2:WebView2 Name="MyWebView"
Height="800" >
</wv2:WebView2>
</StackPanel>
</Grid>
Define the Z-Order explicitly by setting a ZIndex for the items.
Gets or sets a value that represents the order on the z-plane in which an element appears. [...] The greater the value of a given element, the more likely the element is to appear in the foreground.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1" ZIndex="1">
<wv2:WebView2 Name="MyWebView"
Height="800" >
</wv2:WebView2>
</StackPanel>
<StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
<Canvas >
<local:VideoPlayer x:Name="videoPlayer" Background="AntiqueWhite"/>
</Canvas>
</StackPanel>
</Grid>
The default ZIndex is zero, and that explains why the order in the Grid matters.
Members of a Children collection that have equal ZIndex values are rendered in the order in which they appear in the visual tree. You can determine the index position of a child by iterating the members of the Children collection.
It seems the WPF WebBrowser control has a builtin minimum height of 150.
You can set a height explicitly and it will comply but in a * layout it won't resize to less than 150.
Simplified my xaml looks like this (stripped colors, borders, etc.)
edit1: added ItemsControl (seems to cause this or is related to the problem, doesn't matter if the webbrowser loads a html file or not)
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WebBrowser Grid.Row="0" Name="WebBrowserStartPage" Source="pack://siteoforigin:,,,/StartPage.html" />
<ListBox Grid.Row="1" />
</Grid>
</ItemsControl>
Setting MinHeight seems to be ignored.
It there any other way to set the minimum height for resizing?
After some more testing I found that setting the VerticalScrollBarVisibility to Disabled fixes that problem...
Maybe this helps someone who comes across this issue...
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
I still don't know why the WebBrowser stopped resizing at 150... Might be some magic Microsoft number?
I have a 3 Level Nested ListView binded to the same 3 Level Nested Collection. MainItems are added at the 3rd level.
Unmodified, there are scrollbars on ALL the levels. On item added, I edit the Containing Grid of the ListViewItem to adjust the height dynamically.
I have succeeded on removing the 3rd Level Scroll Bar. However, I want to remove the 2nd Level also, which I can't seem to do.
When I try to adjust the height of the 1st Level ListViewItem, the scrollbars on the 1st Level just disappears but the height is not adjusted at all.
What I want to do is ONLY have the ScrollBar on the 1st Level and scroll from there.
Basically, something like this:
This is my current code:
<Grid x:Name="ParentGrid">
<ListView x:Name="Level1ListView"
ItemsSource="{Binding Path=Level1}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="GridLevel1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ToolKit_Controls:LayoutTransformControl Grid.Column="0">
<ToolKit_Controls:LayoutTransformControl.Transform>
<RotateTransform x:Name="rotateTransform" Angle="270"/>
</ToolKit_Controls:LayoutTransformControl.Transform>
<TextBlock Text="{Binding Path=Level1NameString}" FontSize="32" HorizontalAlignment="Center" />
</ToolKit_Controls:LayoutTransformControl>
<ListView x:Name="Level2ListView"
ItemsSource="{Binding Path=Level2}"
Grid.Column="1"
>
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="GridLevel2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border BorderBrush="White" BorderThickness="1" Grid.Row="0"/>
<TextBlock Text='{Binding Path=Level2Name}' Foreground="Black" FontSize="18"
Grid.Row="0"/>
<Grid x:Name="GridLevel3" Width="300" Height="100" Grid.Row="1">
<ListView x:Name="ListView_Level3" IsSwipeEnabled="False"
ManipulationMode="None"
ItemsSource="{Binding Path=Level3DisplayCollection}"
Grid.Column="1">
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</ListView.ItemContainerTransitions>
</ListView>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1" ></WrapGrid>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
And the important code which changes the height on item added:
var GridLevel1 = TypedAssociatedObject.GetAncestors().Where(a => a.Named("GridLevel1")).FirstOrDefault() as Grid;
//GridLevel1.Height = GridLevel1.ActualHeight + 50;
var GridLevel2 = TypedAssociatedObject.GetAncestors().Where(a => a.Named("GridLevel2")).FirstOrDefault() as Grid;
GridLevel2.Height = GridLevel2.ActualHeight + 50;
var GridLevel3 = TypedAssociatedObject.GetAncestors().Where(a => a.Named("GridLevel3")).FirstOrDefault() as Grid;
GridLevel3.Height = GridLevel3.ActualHeight + 50;
Level 1 is commented out because when I add it, although the 2nd Scroll Bar is removed the ListViewItem height doesn't change, resulting in the UI being wrong and not showing everything. You also notice that the 1st level scrollbar remains the same size:
What I want is to extend the height of Header 1 so that everything still shows and the 1st Level Scrollbar on the right is the one that extends / grows.
Can anyone help point out what I am doing wrong?
Thank you!
Edit: This is a Windows store app.
Set the ItemsPanel to StackPanel in your inner list views. This way you would not need to adjust the height of each item.
Also to hide the scrollbars use ScrollViewer.VerticalScrollBarVisibility="Hidden" on your inner list views.
Have you considered using grouping?
I have a tree control where the users can select the nodes by checking them. I want to give the user an option to display the selected items only.
I am thinking of an expander. When the user expands the expander, the expander expands over the original tree control with another content which shows only the selected items.
The trouble is the expander is only stretching to the size of its content. I want the expander to stretch fully so that the original tree will be invisible until the expander is collapsed.
Code is given below. The tree outside the canvas is the original tree. The tree inside the canvas is the read only tree which the expander is supposed to show
<Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="33" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Canvas Canvas.ZIndex="999" Grid.Row="0" HorizontalAlignment="Stretch" >
<telerik:RadExpander HorizontalAlignment="Right" ToolTipService.ToolTip="Show Selected Items"
ExpandDirection="Down" Expanded="RadExpander_Expanded" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<telerik:RadExpander.Header>
<TextBlock
Text="Selected Items"
Width="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadExpander}, Path=ActualWidth}" />
</telerik:RadExpander.Header>
<telerik:RadTreeView IsExpandOnSingleClickEnabled="True" IsLoadOnDemandEnabled="False"
Height="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadExpander}, Path=ActualHeight}"
ItemTemplate="{StaticResource SelectedElementDataOnlyTemplate}" Margin="0,0,0,8"
ItemsSource="{Binding Path=SelectedElementsOnly}" x:Name="ElementsTree2" >
</telerik:RadTreeView>
</telerik:RadExpander>
</Canvas>
<telerik:RadTreeView AutomationProperties.AutomationId="ElementPicker" IsExpandOnSingleClickEnabled="True" IsVirtualizing="True"
ItemsOptionListType="None" Grid.Row="1" ItemTemplate="{StaticResource ElementDataTemplate}" IsRootLinesEnabled="True" Margin="0,0,0,8"
ItemsSource="{Binding Path=Elements}" IsLoadOnDemandEnabled="True" Visibility="{Binding ToggleSelectedElements,
Converter={StaticResource BoolToVisibilityConverter}}" LoadOnDemand="tvMain_LoadOnDemand" x:Name="ElementsTree" SelectedItem="{Binding Path=SelectedItem,Mode=TwoWay}">
</telerik:RadTreeView>
</Grid>
Using Canvas instead of Grid does the trick.
Hope it helps.
I would like a textblock that has vertical scrolling. I have the following XAML
<ScrollViewer HorizontalAlignment="Left" Height="90" Margin="10,416,0,0" VerticalAlignment="Top" Width="463" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" CanContentScroll="True" >
<TextBlock Name="txtConfigPath" Text="" >
</TextBlock>
</ScrollViewer>
This produces a textblock that only scrolls horizontally. I've tried everything I can think of but this control only wants to scroll horizontally.
You have several options here. You can set TextWrapping=Wrap on the TextBlock and Disable the HorizontalScrolling on the ScrollViewer, or you can set the TextWrapping on the TextBlock and either set a fixed width to your TextBlock or you can Bind it's MaxWidth to the ActualWidth of the ScrollViewer like TextBlock MaxWidth="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}, Path=ActualWidth}"
Hope this helps, cheers!
Add a grid with a row definition of * to accommodate your ScrollViewer and Auto for other rows (as for Header and footer.)
Add this code for the ScrollViewer:
<UserControl ...>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock><Run Text="Some text"/></TextBlock>
<ScrollViewer
Grid.Row="1"
CanContentScroll="True"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
MinWidth="{Binding ActualWidth,
BindsDirectlyToSource=True,
ElementName=userControl, Mode=OneWay}">