ScrollViewer is not working for TextBlock in WPF - wpf

Friends, below is my code. I don't know why my scroll bar is not working.
<Window x:Class="Seris.Views.Help"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Help" Height="400" Width="400">
<DockPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="350" Width="372"><InlineUIContainer>
<Image Height="100" Width="100" RenderTransformOrigin="1.37,0.46" Source="../Images/help.jpg"/>
</InlineUIContainer><Run/><LineBreak/><Run Text="There are some validations on the Vehicle Form as below."/><LineBreak/><Run Text="P"/><Run Text="lease note that all the fields are mandatory."/><LineBreak/><Run/><LineBreak/><Run FontWeight="Bold" Text="Vehicle No"/><LineBreak/><Run Text="It should be always 7 character long con"/><Run Text="taining "/><Run Text="first 3 digits as alphabet in capital form and remaining 4 numerical. "/><LineBreak/><Run Text="i.e. GHI1234"/><LineBreak/><Run FontWeight="Bold" Text="Model"/><LineBreak/><Run Text="It can be anything except null."/><LineBreak/><Run Text="i.e. Fluid"/><LineBreak/><Run FontWeight="Bold" Text="Manufacturing Date"/><LineBreak/><Run Text="It should not be a future date."/><LineBreak/><Run FontWeight="Bold" Text="IU No"/><LineBreak/><Run Text="It must be 10 digit numerical number."/><LineBreak/><Run FontWeight="Bold" Text="Personnel Name"/><LineBreak/><Run Text="You must select Personnel Name from combo box."/><LineBreak/>
</TextBlock>
</ScrollViewer>
</DockPanel>
</Window>

Remove Height="350" & Width="372" from the TextBlock, these are preventing ScrollViewer to work properly
if you want to restrict the size you may apply the same to DockPanel or ScrollViewer as needed.
so in short if you apply width or height to TextBlock that will restrict the size of the element and ScrollViewer may not work as expected.
additionally you may also remove HorizontalAlignment="Left" & VerticalAlignment="Top" from the TextBlock as they might not be required as well

Related

WPF Compobox - how to display entire content of the two items without scrolling?

The following Combobox in WPF project needs to always have exactly two Rectangles of heights 256 and 36 in each item respectively. And when user clicks on the dropdown button of the Combobox I would like to have it display both ComboboxItems without user having to scroll.
Question: How can we achieve it? Currently it displays only first ComboboxItem (Aqua color rectangle inside), and you have to scroll to get to see the second ComboboxItem (YellowGreen color rectangle inside). I have tried setting ScrollViewer.VerticalScrollBarVisibility="Hidden" on combo box but that makes it even worst since it does not even allow to show the second item.
XANL:
<Window x:Class="Wpf_TestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Wpf_TestApp"
mc:Ignorable="d"
Title="MainWindow" Height="569.455" Width="800">
<Grid>
<StackPanel Margin="5" Width="15">
<ComboBox DockPanel.Dock="Top" Width="25">
<DockPanel>
<ComboBoxItem DockPanel.Dock="Top">
<StackPanel Width="180" Height="260">
<Rectangle x:Name="MyRectangle" Fill="Aqua" Width="176" Height="256"/>
</StackPanel>
</ComboBoxItem>
</DockPanel>
<DockPanel>
<ComboBoxItem DockPanel.Dock="Top">
<StackPanel Width="180" Height="38">
<TextBlock Text="Second Item:" />
<Rectangle x:Name="MyOtherRectangle" Fill="YellowGreen" Width="176" Height="36"/>
</StackPanel>
</ComboBoxItem>
</DockPanel>
</ComboBox>
</StackPanel>
</Grid>
</Window>
Screenshot of the above combobox:
Display when user first clicks on dropdown of the combobox:
User has to scroll to get to the second item of the combobox:
You can use dependency property MaxDropDownHeight of ComboBox as shown below to display both combo box items in the drop down without having to scroll,
<ComboBox DockPanel.Dock="Top" Width="25" MaxDropDownHeight="Auto">
I have tested your code with 320 Height and it works perfectly fine. If you need to add more items, you can increase the MaxDropDownHeight value accordingly.

Having issues with the scroll bar in WPF

So im trying to get my scroll bar to A only show up as needed and B show up only around my description text
Right now the scroll view is going from the top of the window to the bottom
<Window x:Class="WpfApplication3.DataWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataWindow" Height="300" Width="300">
<Grid>
<Label x:Name="lblTitle" Content="Label" HorizontalAlignment="Left" Margin="96,25,0,0" VerticalAlignment="Top" Width="186"/>
<Label x:Name="lblPublishDate" Content="Label" HorizontalAlignment="Left" Margin="96,53,0,0" VerticalAlignment="Top" Width="186"/>
<Image x:Name="imgPic" HorizontalAlignment="Left" Height="81" Margin="10,10,0,0" VerticalAlignment="Top" Width="81"/>
<ScrollViewer>
<TextBlock x:Name="tbDesc" HorizontalAlignment="Left" Margin="10,96,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="167" Width="272" Text="TextBlock" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
</Grid>
A grid tries to let it's children take up all availble space.
Your ScrollViewer is one of the children, so it will fill all available space by default.
There are a number of ways around this.
You could use a different panel type, one that doesn't try to stretch it's children to fill all available space. Based on what you're doing with excessively large margins, a Canvas might be suitable.
I would suggest reading this for a quick understanding of WPF's available Layout Panels : WPF Layouts - A Visual Quick Start
Another alternative is to give your Grid some Row Definitions, and specify that the row containing the ScrollViewer should be of a fixed size, or should be sized so it fits whatever size the child object wants (Height="Auto")
Or you could give your ScrollViewer a fixed height, and set it's VerticalAlignment property so it gets docked to either the top or bottom of the Grid.
Personally I would recommend the first option - reviewing WPF's layout system and determining a more approrpiate panel type for your layout. And if the most appropriate panel type is a Grid, then I would highly recommend using the RowDefinitions and ColumnDefinitions to give your Grid some structure, rather than trying to use excessively large Margins to position your controls.
You're pretty close, the problem appears to be an issue of layout. Because the controls are arranged in the grid without row and column definitions the scrollviewer is attempting to resize to the full size of the grid while the textblock is adhereing to its fixed size and margin. Try the following starting point and see if it helps:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<Label x:Name="lblTitle" Content="Label" HorizontalAlignment="Left" Width="186"/>
<Label x:Name="lblPublishDate" Content="Label" HorizontalAlignment="Left" Width="186"/>
<Image x:Name="imgPic" HorizontalAlignment="Left" Height="81" Width="81"/>
</StackPanel>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="tbDesc" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock"/>
</ScrollViewer>
</Grid>

wp7 popup blocking textbox in popup

I have a popup that opens on the MainPage with a couple of textboxes. When ever you focus on the lower textbox the keyboard obscures it from view. Usually the textboxes slide into view. i don't know why that is not happening here.
please help!
<UserControl x:Class="Controls.EditControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:SampleData="clr-namespace:SampleData"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Height="800" Width="480"
d:DataContext="{d:DesignData ../SampleData/sampleEditPopup.xaml}">
<Grid x:Name="LayoutRoot" Background="#FF000000" Opacity="0.995">
<StackPanel Margin="0,20,0,0" Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="Name" HorizontalAlignment="Left" Height="26" Margin="15,10,0,10" Width="110" TextAlignment="Right"/>
<TextBox x:Name="tb_name"
TextWrapping="Wrap"
Width="340" Height="75"
Margin="10,13,15,12"
InputScope="Text" MaxLength="1000"
Text="{Binding Title, Mode=TwoWay}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,150,0,0" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="Description" HorizontalAlignment="Left" Height="26" Margin="15,40,0,10" Width="110" VerticalAlignment="Top" TextAlignment="Right"/>
<TextBox x:Name="tb_description"
TextWrapping="Wrap"
Width="340" Height="254"
Margin="10,13,15,12"
InputScope="Text" MaxLength="1000"
Text="{Binding Description, Mode=TwoWay}"/>
</StackPanel>
</Grid>
and here is the code to open it:
EditControl ec = new EditControl();
ec.Title = cm.Title;
ec.Description = cm.Description;
//sets appbar icons for accepting values
setEditIcons();
Popup edit = new Popup() { Child = ec, Tag = this };
edit.Closed += new EventHandler(edit_Closed);
edit.IsOpen = true;
from a UX perspective I'd heavily recommend against having any partial popup/overlay that has more than 1 or 2 buttons. It's just not done in WP7. If you have a form you'd like folks to fill out move it to its own page. Either by letting the user navigate to that page, or by introducing a new transient page (that cannot be navigated back into) prior to the current page.
You'll have more problems than just the on-screen keyboard in with form overlays. You'll need to change the AppBar to have "V" and "X" buttons for any data entry, you'll need to manage focus not slipping back into under the overlay/popup, you'll need to make sure the "back" button closes the popup, etc.
IMO The best approach is a simple and consistent UX.

TextBlock text wrapping pushes other components

I have a TextBlock and a couple Buttons in a StatusBar. The Buttons are effectively right-aligned (e: actually the StatusBarItem containing them is). When the window is shrunk horizontally, and the text wraps, the TextBlock pushes the Buttons off the window to varying degrees.
Why does this happen, and how can I fix the positions of the Buttons?
<Window x:Class="TextWrapping.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem>
<TextBlock Name="statusText" TextWrapping="Wrap" Text="when this text wraps, it pushes the buttons off the window" />
</StatusBarItem>
<StatusBarItem HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal">
<Button>one</Button>
<Button>two</Button>
</StackPanel>
</StatusBarItem>
</StatusBar>
<TextBlock Text="shink this window horizontally" />
</DockPanel>
</Window>
You can see this blog post for more information, but basically the StatusBar is using a DockPanel to present it's items. So for the code you have above, the statusText is being docked left, and the buttons are filling the remaining space (but aligned horizontally within that area).
So as you size smaller, the TextBlock will always take as much space as it needs (allowing the buttons to size to zero). When the text is wrappped, the buttons get back a little more space as the TextBlock doesn't need all the horizontal space.
To fix it you can change your code to:
<DockPanel>
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem DockPanel.Dock="Right">
<StackPanel Orientation="Horizontal">
<Button>one</Button>
<Button>two</Button>
</StackPanel>
</StatusBarItem>
<StatusBarItem>
<TextBlock Name="statusText" TextWrapping="Wrap" Text="when this text wraps, it pushes the buttons off the window" />
</StatusBarItem>
</StatusBar>
<TextBlock Text="shink this window horizontally" />
</DockPanel>
Or you can use the trick shown the blog post, to replace the DockPanel with a Grid.

WPF TabIndex in a composite control

I have a simple window with a simple composite control embedded within it.
(Main Window)
<Window x:Class="TabOrder.Window1"
xmlns:local="clr-namespace:TabOrder"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Label HorizontalAlignment="Left" VerticalAlignment="Top">First</Label>
<TextBox TabIndex="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="80,0,0,0"/>
<Label HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,30,0,0">Second</Label>
<TextBox TabIndex="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="80,30,0,0"/>
<local:MyControl Margin="0,60,0,0" VerticalAlignment="Top" HorizontalAlignment="Stretch" TabIndex="2"/>
</Grid>
(Composite control)
<UserControl x:Class="TabOrder.MyControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Label HorizontalAlignment="Left" VerticalAlignment="Top">Third</Label>
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="80,0,0,0"/>
<Label HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,30,0,0">Fourth</Label>
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="80,30,0,0"/>
</Grid>
As expected on my form I get 4 text boxes...
First
Second
Third
Fourth
But when "First" has focus and I hit tab the focus is switched to "Third". WPF seems to be seeing the tab list as a single flat list rather than as a tree where MyControl is TabIndex 3 and the text box "Third" the first tabbed control within it.
Is this a bug in WPF or is there another way of doing this? The composite control is used in many windows, it could even be used more than once on a single window.
I know this response is quite late... but have you tried:
<UserControl ... KeyboardNavigation.TabNavigation="Local">
Doing so will ensure once your UserControl has recieved focus, you will navigate only through TabStop within your UserControl (instead of worring about conflicting TabIndex values throughout your app). After looping through the TabStops of your UserControl, TabNavigation will resume to the TabStop outside of it.
http://msdn.microsoft.com/en-us/library/system.windows.input.keyboardnavigationmode.aspx

Resources