I want to make my screen scroll when virtual keyboard comes so that i can enter text in text boxes hidden behind the keyboard.
In windows phone 8 there is no way of knowing keyboards height.
when i tap text box 1 keyboard pops up, now i want to enter text in text box 4 and 5 by scrolling the screen and without removing the keyboard.
following is the xaml code.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox x:Name="txt1" ></TextBox>
<TextBox x:Name="txt2" ></TextBox>
<TextBox x:Name="txt3" ></TextBox>
<TextBox x:Name="txt4" ></TextBox>
<TextBox x:Name="txt5" ></TextBox>
<TextBox x:Name="txt6" ></TextBox>
</StackPanel>
</Grid>
before
after
Related
Problem solved!
Anyway, I just figured out the problem. I did a .Trim() on the values and surprisingly they can be wrapped. Thanks and sorry for all the trouble. =)
I am doing some data binding to my textblock in a grid.
However, some of the texts are not showing fully.
I tried the Text Wrapping and setting a maximum width to my textblock. But none of them worked.
EDIT : Hi again. I noticed that when I changed the text of the textblock manually via codes like
txtDesc.Text = "This is a job for Stackers. If you like stacking, please contact me.
The text wrapping actually works. So somehow the databind result text can't be wrap?
The XAML code for my textblock.
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize=" {StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
Any help here?
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="images/SmallLogoNTitle.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ListPicker ItemsSource="{Binding}" Name="lpkTypeOfService" Margin="0,116,12,0" Height="65" VerticalAlignment="Top" HorizontalAlignment="Right" Width="210" SelectionChanged="lpkTypeOfService_SelectionChanged">
</toolkit:ListPicker>
<ListBox Margin="8,210,8,26" Name="listBox1" Width="450">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
<TextBlock HorizontalAlignment= "Left" Grid.Row="1" Grid.Column="0" Name="Creator" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
<TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
<TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
<Button Content="Apply" Height="70" Width="140" Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Height="65" HorizontalAlignment="Left" Margin="12,116,0,0" Name="textBlock1" Text="Find Service :" VerticalAlignment="Top" Width="216" FontSize="36" />
</Grid>
</Grid>
It comes from poor / over-complicated layout architecture and the way your objects are positioning each other. Might try something like this for your DataTemplate
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!-- Don't worry, you already had your 450 Width set on the parent -->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Name="Creator" Grid.Row="1" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" TextWrapping="Wrap"/>
<Button Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1" Content="Apply" Height="70" Width="140" Margin="5,0"/>
</Grid>
</DataTemplate>
Also for the sake of cleaner xaml, remember things like Margin="0", Grid.Column="0", HorizontalAlignment="Left" etc. are default dependency properties, so no need to set them to each individual object. Even in the case you need to, you can apply them as Setters to the TargetType in the parent Object.Resources and avoid setting them to each individual object. Another tip would be, don't rely on a bunch of obfuscated random Margins etc to create your layout. It's best to do it right the first time instead of hunting down discrepancies between a bunch of inter-dependent little "fixes"
I didn't test it, but should work fine unless you got something else somewhere pushing stuff around. Hope this helps.
Can you disable horizontal scrolling in your listbox control?
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Use VerticalAlignment="Stretch" instead of VerticalAlignment="Top". This way the textblock will stretch to the height of the row.
I put a MapControl in a scrollviewer, but when I pulled up the MapControl, the MapControl covered the TitlePanel!Like this photo
How to fix this?Is it a system bug?Thx~~~
Here is My xaml code
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel 包含應用程式的名稱和頁面標題-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="我的應用程式" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="頁面名稱" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - 其他內容置於此-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer>
<Grid Width="440" Height="258" VerticalAlignment="Top">
<msMap:Map x:Name="Map" CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Collapsed" CredentialsProvider="Al1klJ_w8MPrZ0kntZyMogTJkXb79xyNKVC2XpJuwSPp0NmAbrIuAthSzs5xbomJ">
</msMap:Map>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
there is definitely some problem in your grid margins. If you paste your xaml code. Maybe I will be help you out in a more better way
[Updated]
Try: This is working for me.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer>
<Grid MaxHeight="400" VerticalAlignment="Top">
<my:Map HorizontalAlignment="Stretch" Name="map1" VerticalAlignment="Stretch" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
I've been having some issues with the layout of a page when I have a WebBrowser control in it.
Here's the significant portion of my XAML:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,12">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="{Binding Title}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<StackPanel Grid.Row="1" Margin="12,17,0,12">
<phone:WebBrowser Name="HtmlBody" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red" Margin="12,17,0,28"/>
</StackPanel>
</Grid>
My question is how do I make the WebBrowser streatch. Setting it's properties to auto doesn't help. If I do that it defaults to a height of 0.
Any ideas?
Use Grid instead of the StackPanel, and set the height of the second row to "*", like this:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,12">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="{Binding Title}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid Grid.Row="1" Margin="12,17,0,12">
<phone:WebBrowser Name="HtmlBody" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red" Margin="12,17,0,28"/>
</Grid>
</Grid>
I am playing around with silverlight - specifically Silverlight for windows phone. I would like to have a textblock inside a border element. I want the textblock to fill up the entire border element. I would also like the text inside the textblock to the centered within the textblock - both vertical and horizontal.
The problem that I am encountering is that if I set the horizontal and vertical alignment of the textblock to center, then the textblock resizes to the size of the text, hence the textblock does not fill up all the available room inside the border. If I set the horizontal and vertical alignment properties of textblock to stretch, I get the textblock to expand to fill up the border, but the textblock text is not centered anymore. I think I can use padding to center the text, but this does not give a precise result as the length of the text can vary.
The reason why I would like to have the textblock within a border in the first place is because Silverlight for Windows Phone does not provide a background property for textblock. I use the border to provide a background color.
In short, is there any way to center the text in a textblock, when the textblock is inside a border element and the textblock must stretch to fill the border.
Below is the code that I have so far.
<Border BorderBrush="Red" BorderThickness="2" Grid.Row="0" Grid.Column="0">
<TextBlock Name="textBlockA1" Text="Center Me!" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Border>
You don't need to center or stretch anything. I assume you will eventually put this Border to a Grid, so just set the Grid's column and row to auto and the Border will resize itself based on the size of the TextBlock.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock x:Name="textBlockA1" Text="Center Me!"/>
</Border>
</Grid>
UPDATE
I don't understand why someone would downvoted this. This is definitely a good way to add a Background color to a TextBlock. It's like you are filling the Grid's cells with the Border's background color. See below example.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="12"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="12" />
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="#FFBC7C0A">
<TextBlock x:Name="textBlockA1" Text="Center Me!" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Background="#FFBC7C0A" Grid.Row="2">
<TextBlock x:Name="textBlockA2" Text="Center Me!" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Background="#FFBC7C0A" Grid.Row="2" Grid.Column="2">
<TextBlock x:Name="textBlockA3" Text="This is a longer text" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Background="#FFBC7C0A" Grid.Column="3">
<TextBlock x:Name="textBlockA4" Text="Short" Foreground="White" Height="27" VerticalAlignment="Top" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
<Border Background="#FFBC7C0A" Grid.ColumnSpan="3" Grid.Row="4" HorizontalAlignment="Left">
<TextBlock x:Name="textBlockA5" Text="Center Me!" Foreground="White" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Style="{StaticResource PhoneTextNormalStyle}"/>
</Border>
</Grid>
Also, if you want a left or right margin on the TextBlock you can either apply a style to the TextBlock (e.g. PhoneTextNormalStyle) or give a padding to the Border.
If center alignment does not do it for you and you want to stretch the text to use up more space you can either use the FontSize property and choose a bigger font or use a ViewBox:
<Border
BorderBrush="Red"
BorderThickness="2"
Grid.Row="0"
Grid.Column="0">
<Viewbox>
<TextBlock
Name="textBlockA1"
Text="Center Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Viewbox>
</Border>
I tried to control the memory in our application. But the memory is not the same as when a new application starts.
Example:
In app, I have 2 Pages (MainPage.xaml and Page1.xaml).
Code in MainPage(.Xaml):
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="147,223,0,0" Name="button1" VerticalAlignment="Top" Width="160"/>
</Grid>
</Grid>
and Page1.xaml :
<Grid x:Name="LayoutRoot" Background="Transparent">
<Button Content="add" Height="72" HorizontalAlignment="Left" Margin="41,12,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
<Button Content="remove" Height="72" HorizontalAlignment="Left" Margin="240,12,0,0" Name="button2" VerticalAlignment="Top" Width="160" Click="button2_Click" />
<ListBox Height="666" HorizontalAlignment="Left" Margin="12,90,0,0" Name="lsbMyList" VerticalAlignment="Top" Width="456" />
</Grid>
Page1: when I returned from the memory MainPage, my application increased from 1Mb to over 5Mb.
In listbox of Page1, I add an Image to listBox, when I Back Page , I set the image control to null URL and imageControl = null; memory is not reduced
Can anyone point me in the right direction?
See instructions on releasing image memory at http://blogs.msdn.com/b/swick/archive/2011/04/07/image-tips-for-windows-phone-7.aspx
How are you confirming that the memory is from the image and not anything else you're using and possibly not clearing up?