Use GroupBox, fill content. The same content sometimes stretches the GroupBox, sometimes not, and can not be seen completely. Why?
<GroupBox>
<GroupBox.Header>
<TextBlock Text="{Binding Caption}"
Foreground="#FF00A3E9"
FontSize="12"/>
</GroupBox.Header>
<GroupBox.Content>
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Orientation="Vertical"
Margin="0,-10,0,0">
<Grid ... />
<FlowDocumentScrollViewer VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalScrollBarVisibility="Disabled"
IsSelectionEnabled="False"
Background="Blue"
Margin="0,0,0,-7"
Document="{Binding PartData}" />
<Grid ... />
</StackPanel>
</GroupBox.Content>
</GroupBox>
Related
my list view inside the split view is not scrolling.
XAML code of total page goes like below.
<SplitView ScrollViewer.IsVerticalRailEnabled="True" BorderBrush="White" BorderThickness="1" x:Name="windowssplit1" DisplayMode="Overlay" Margin="40,-95,0,-200" Width="340" HorizontalAlignment="Left" x:FieldModifier="Public" Grid.RowSpan="2">
<SplitView.Pane>
<!--<Grid Background="Gray" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalScrollChainingEnabled="True">-->
<StackPanel Background="Gray" BorderBrush="White" BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.IsVerticalScrollChainingEnabled="True" Margin="0,49,0,-162">
<TextBlock Text="All Ages" Margin="20,10,0,10" Foreground="White" FontSize="20" />
<Border BorderThickness="0.4" BorderBrush="White" Margin="20,0,0,10" Width="280" HorizontalAlignment="Left"/>
<ListView x:Name="filterlist1" Margin="10,0,0,0" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsVerticalRailEnabled="True" SelectionChanged="filterlist_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="18" Margin="0,10,0,0" Foreground="White" Text="{Binding CategoryName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</Grid>-->
</StackPanel>
</SplitView.Pane>
</SplitView>
The List View present in the Bolded Code must Scroll how this can be done, Help me....
How to make the List scroll
i think you need to put your listview inside a scrolViwer !
I believe this has to do with the panel that the ListView is in. Set the ListView to have a 'fixed' MaxHeight so that it can know when to scroll.
<ListView x:Name="filterlist1" Margin="10,0,0,0"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.IsVerticalRailEnabled="True"
SelectionChanged="filterlist_SelectionChanged"
MaxHeight="400">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="18" Margin="0,10,0,0" Foreground="White" Text="{Binding CategoryName}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
To make the ListView scrollable, we need give the ListView a explicit height or use a layout that can limit the height of ListView.
StackPanel is not suitable for this scenario as it won't limit the size of ListView. All items are showed in the ListView, but only these items in StackPanel can be seen.
We can use Grid instead of StackPanel and try with following code:
<SplitView x:Name="windowssplit1"
Grid.RowSpan="2"
Width="340"
HorizontalAlignment="Left"
BorderBrush="White"
BorderThickness="1"
DisplayMode="Overlay"
IsPaneOpen="True"
x:FieldModifier="Public">
<SplitView.Pane>
<Grid Background="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Margin="20,10,0,10"
FontSize="20"
Foreground="White"
Text="All Ages" />
<Border Width="280"
Margin="20,0,0,10"
HorizontalAlignment="Left"
BorderBrush="White"
BorderThickness="0.4" />
<ListView x:Name="filterlist1"
Grid.Row="1"
Margin="10,0,0,0"
SelectionChanged="filterlist_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0,10,0,0"
FontSize="18"
Foreground="White"
Text="{Binding CategoryName}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
</SplitView>
Here I set two rows in Grid and put the ListView in the second row. Second row's Height is set to * so it can get the rest Height of the Grid. I also remove the Margin in SplitView to see the scroll bar clearly.
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I have a ListView of ToggleButtons. Every button is binded to a Popup window.
Every Popup window is being opened at the same place as the button, but I want it to be at the same place as the first button.
Here is the code and images:
The buttons:
This is what happens when the first button is open:
This is what happens when the second button is open:
<ListView x:Name="ListOfRecipes" HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{Binding}" Grid.Row="1" Margin="25,0.333,25,35" ScrollViewer.VerticalScrollMode="Enabled" Grid.RowSpan="5" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="90*" />
<RowDefinition Height="150*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ToggleButton x:Name="RecipeButton" Grid.Row="1" BorderBrush="#FF65C365" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" Height="150" Width="328" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="128" Width="328">
<Image Source="{Binding Path=ImageUri}" Height="128" Width="128" Margin="0,6,0,-5.667" />
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="192">
<TextBlock Height="25" Width="190" Foreground="#FF6FDC13" Text="{Binding Name}" VerticalAlignment="Top" />
<Image Name="YesOrNoImage" Source="{Binding Path=YesOrNoImage}" Width="102" Height="102" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=RecipeButton, Mode=TwoWay}" Height="0" Width="328" VerticalAlignment="Center" Name="PopupOne" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" Visibility="{Binding IsChecked, ElementName=RecipeButton}">
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<ScrollViewer VerticalScrollMode="Enabled" >
<StackPanel Orientation="Vertical" ScrollViewer.VerticalScrollMode="Enabled">
<Image Source="{Binding Path=ImageUri}" Height="328" Width="328" />
<TextBlock Foreground="#FF6FDC13" Text="{Binding Name}" HorizontalAlignment="Left" FontSize="28" />
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</StackPanel>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the popup you can define a grid and set the popup height there
Something like this:
<Popup x:Name="resultsPopup"
AllowsTransparency="True"
IsOpen="{Binding IsResultsPopupOpen,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Placement="Bottom"
PlacementTarget="{Binding ElementName=SearchBox}"
StaysOpen="False">
<Grid Width="{Binding ActualWidth,
ElementName=SearchBox}"
Height="300">
</Grid>
</Popup>
UPDATE:
You can place the popup wherever you want with the Placement property as shown above, the set the binding of the "PlacementTarget" to the control you want to bind.
In the example above the popup will be shown below the UI control named SearchBox
So I have this problem, a textblock's text gets cut off, even though you can still scroll with scrollviewer to the end.
You can see the scrollviewer is still able to scroll to where the text should be.
Heres the XAML:
<Grid>
<ScrollViewer Height="Auto" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<TextBlock x:Name="text" Padding="5" Margin="0" TextWrapping="Wrap" Text="" FontSize="24" TextTrimming="WordEllipsis" VerticalAlignment="Bottom" />
</ScrollViewer>
</Grid>
EDIT the whole pivot control code:
<controls:Pivot x:Name="pivot" Margin="0" Grid.Row="1" Title="title" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<controls:PivotItem Header="Straipsnis">
<Grid>
<ScrollViewer Height="Auto" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<Border BorderBrush="White" BorderThickness="1">
<TextBlock x:Name="text" Padding="5" TextWrapping="Wrap" Text="" FontSize="24"/>
</Border>
</ScrollViewer>
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Komentarai">
<Grid>
<ListBox x:Name="commentsListBox" ItemTemplate="{StaticResource CommentsList}" Height="Auto" Width="Auto" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="20"/>
<TextBlock x:Name="errorText" TextWrapping="Wrap" Text="Nėra komentarų..." FontSize="36" HorizontalAlignment="Left" Margin="10,0,0,0"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>
Well, turns out the TextBlock has limits, 2048x2048 or something like that, after which the text just gets cut off.
So, I found this custom text control that bypasses this limitation :) Maybe someone will find it useful, I did.
Creating Scrollable TextBlock for WP7.
Download link
I need to display Buttons, which user can use to add controls. Buttons are categorized in groups. Here is the XAML I am having -
<ScrollViewer
VerticalScrollBarVisibility="Auto">
<GroupBox
Name="maingroup"
Header="Click To Add Controls"
BorderBrush="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="90" />
</Grid.RowDefinitions>
<GroupBox
Grid.Row="0"
Name="groupVarControls"
Header="{Binding Path=GroupBoxHeaderText, Mode=OneWay}">
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Hidden">
<WrapPanel
Margin="7,7,0,0"
AllowDrop="False">
<syncfusion:RibbonButton
SizeForm="Large"
Name="BarControl"
LargeIcon="Images\Bar.png"
Label="Bar"
AllowDrop="True">
</syncfusion:RibbonButton>
<!-- 10 More buttons -->
</WrapPanel>
</ScrollViewer>
</GroupBox>
<GroupBox
Grid.Row="1"
Name="groupVarControls2"
Visibility="{Binding Path=GroupBoxVisibility, Mode=OneWay}"
Header="Click to Add control">
<ScrollViewer
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Auto">
<WrapPanel
Margin="7,7,0,0"
AllowDrop="False">
<syncfusion:RibbonButton
SizeForm="Large"
Name="ClockControl"
AllowDrop="False"
LargeIcon="Images\Clock.png"
Label="Clock"
Click="ClockControl_Click" />
<!-- More buttons -->
</WrapPanel>
</ScrollViewer>
</GroupBox>
</Grid>
</GroupBox>
</ScrollViewer>
I want a vertical ScrollBar common for both WrapPanel's and individual horizontal ScrollBar's. With this XAML scrollbars are not coming correctly, ScrollViewer causes the wrapping to be "disabled", it just leaves my controls in a single row (or column), and uses a ScrollBar right away.
I can't give a fixed widht to WrapPanel's as this control will be displayed in a DockPanel(similar to VS toolbox) and user can cnage it.
Any ideas?
This code will show one vertical scrollbar and two horizontal scrollbars when needed. In your code you need to set the MinWidth for the wrap panels to the width of the widest child. You probably can do that easily in your code that handles when a user adds or removes a control.
<ScrollViewer
VerticalScrollBarVisibility="Auto">
<StackPanel>
<GroupBox Header="Box 1">
<ScrollViewer
VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
<WrapPanel
MinWidth="200"
Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}">
<Button Width="200" Height="50" />
<Button Width="150" Height="50" />
<Button Width="160" Height="50" />
<Button Width="170" Height="50" />
<Button Width="180" Height="50" />
</WrapPanel>
</ScrollViewer>
</GroupBox>
<GroupBox Header="Box 2">
<ScrollViewer
VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
<WrapPanel
MinWidth="200"
Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}">
<Button Width="200" Height="50" />
<Button Width="150" Height="50" />
<Button Width="160" Height="50" />
<Button Width="170" Height="50" />
<Button Width="180" Height="50" />
</WrapPanel>
</ScrollViewer>
</GroupBox>
</StackPanel>
</ScrollViewer>