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}">
Related
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>
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 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 have a number of buttons within a grid, that all change size based on the application being resized. Some buttons have child elements such as an ellipse or rectangle. I can't seem to get these to resize as well.
Here is some code:
<Grid DockPanel.Dock="Right" Width="121">
<Grid.RowDefinitions>
<RowDefinition Height="121*" />
<RowDefinition Height="121*" />
// Snip
</Grid.RowDefinitions>
<Button Name="ellipseButton" PreviewMouseDown="EllipseButtonClickedEvent" HorizontalAlignment="Stretch" Grid.Row="0">
<Ellipse Width="90" Height="90" Stroke="Black"></Ellipse>
</Button>
// Snip
</Grid>
I know that the height and width of the ellipse is explicitly set, but when I remove that, I can't seem to get the ellipse to show at all.
I would appreciate any advice.
Thanks.
Just set the HorizontalContentAlignment and VerticalContentAlignment properties of the button to Stretch:
<Button Name="ellipseButton" PreviewMouseDown="EllipseButtonClickedEvent" HorizontalAlignment="Stretch" Grid.Row="0"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
<Ellipse Stroke="Black" />
</Button>