I have a page witch a fixed title followed by a content and a textbox that enables the user to post to my app. When the user press the textbox the keyboard shows up and all the control slide up making impossible for the user to scroll then back?
How can I make the controls float under the keyboard so the user can scroll it.
I have tried witch grids and scrollviewers without success :(
My layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto " />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Width="Auto" Height="50" Fill="Red" />
<Grid Grid.Row="1">
<Rectangle Height="600" Fill="Green" VerticalAlignment="Top" />
</Grid>
<TextBox Grid.Row="1" Width="Auto" Background="Black" VerticalAlignment="Bottom" />
</Grid>
This is what is happening
This is what i expect to happen
The following article explains how to resolve the issue by manipulating the transformations done by the OS to the page.
http://klingdigital.net/2013/06/scrollviewer-and-multiline-textbox-windowsphone/
Related
I'm developing an app on Windows Phone 8, but when I select data from the Web service, it's cutting.
This is my code:
<Grid Background="Aqua">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<ScrollViewer Grid.Row="1" Background="Yellow" >
<ItemsControl>
<TextBlock Grid.Row="1" Foreground="Black" x:Name="tbIcerik" TextWrapping="Wrap" Text="{Binding Icerik}" Style="{StaticResource PhoneTextNormalStyle}">
</TextBlock>
</ItemsControl>
</ScrollViewer>
<!--ContentPanel - place additional content here-->
</Grid>
Can someone please tell me what I'm doing wrong?
Please try adding a margin to the Textblock control
Mehmet,
If you are new to the Windows Mobility Designing Please go through this link. Its very simple to understand
https://msdn.microsoft.com/en-us/library/windows/apps/jj207025%28v=vs.105%29.aspx
After that You can go through Metro Design Guidelines as well.
Thanks
The text block has a limitation of how many characters it can print. If the data you are getting is very huge , there are chances that when you scroll down , other parts of data is being truncated !
Let me know the response you are getting so that I can assist you further
Add Margin to your TextBlock name tbIcerik i.e Margin="10,0,0,10". This will leave equal space in front and back.
I have a slider within a user control. When testing it out, the slider won't move if it is kept within the user control but works outside of it. Is there something that's needed to make it work?
The XAML for the usercontrol:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="4,0,3,0" Grid.RowSpan="1">
<TextBlock Text="15 mins" VerticalAlignment="Center" FontSize="16" Margin="0,-11,0,0" TextLineBounds="Tight" Foreground="White"/>
<Slider Foreground="White" SmallChange="50" TickFrequency="50" LargeChange="50" Background="#BFFFFFFF" Value="50" Margin="5,0" VerticalAlignment="Center" Width="250" StepFrequency="50" Maximum="100" ValueChanged="Slider_ValueChanged"/>
<TextBlock Text="1 hour" VerticalAlignment="Center" FontSize="16" Margin="0,-11,0,0" TextLineBounds="Tight" Foreground="White"/>
</StackPanel>
<ListBox x:Name="TimesList" DataContext="{Binding}" Background="{x:Null}" Foreground="White">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="365" DataContext="{Binding}">
<TextBlock Foreground="White" Text="{Binding}" HorizontalAlignment="Stretch" FontSize="29.333"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Border Grid.RowSpan="2" BorderBrush="#B2FFFFFF" BorderThickness="2,0,2,2" Padding="0" Margin="-5,0,-5,-5"/>
</Grid>
I found that 60 pixels height is not enough for Slider control. That's why it doesn't work. But there are few easy ways to fix it. You can choose whatever fits your needs.
Option 1
Change the first row definition height to Auto. So the Grid will as high as the Slider control. It's 84 pixels.
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Option 2
The way you use Grid layout makes it pretty much the same as StackPanel. So you could also replace this Grid with StackPanel.
Option 3
You na change Sldier's margins to fit 60 pixels height. Set the bottom margin to -24.
<Slider Foreground="White" SmallChange="50" TickFrequency="50" LargeChange="50" Background="#BFFFFFFF" Value="50" Margin="5,0,5,-24" VerticalAlignment="Center" Width="250" StepFrequency="50" Maximum="100" ValueChanged="Slider_ValueChanged"/>
I have create a usercontrol for a splash screen to display when my app starts see code below. But the problem is that the text and prograss bar I want display on top of it doesn't display. I can't figure out what I've done wrong here? It's probablly something simple!
code:
<UserControl
x:Class="ContosoSocial.SplashScreenPage"
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"
mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" >
<Image Stretch="Fill" VerticalAlignment="Top" Width="480" Source="SplashScreenImage.jpg"></Image>
<TextBox HorizontalAlignment="Left"
TextAlignment="Center"
Height="60"
Margin="14,630,0,0"
TextWrapping="Wrap"
Text="App & Database..."
VerticalAlignment="Top"
Width="456"
AcceptsReturn="True"
FontSize="16"
BorderBrush="{x:Null}"
Background="{x:Null}"
Foreground="White"
SelectionBackground="{x:Null}"
SelectionForeground="{x:Null}"/>
<ProgressBar HorizontalAlignment="Left"
Height="10"
Margin="10,680,0,0"
VerticalAlignment="Top"
Width="460"
IsIndeterminate="True"
Foreground="White"/>
<ProgressBar HorizontalAlignment="Left"
Height="10"
Margin="10,695,0,0"
VerticalAlignment="Top"
Width="460"
FlowDirection="RightToLeft"
Foreground="White"
IsIndeterminate="True"/>
<!--TitlePanel contains the name of the application and page title-->
</Grid>
The control run fine in Visual Studio window, I can see the text and progress bars running on top on the splash screen image.
Your code is working perfectly. Just add
Background="{StaticResource PhoneChromeBrush}"
in your LayoutRoot Grid since you text seems to be white in color. You can refer the source code which I tried.
I have a TextBlock with a long line of text which I want to wrap. I've placed the TextBlock within a ViewBox expecting the text size to change while still wrapping, however this doesn't seem to happen. The ViewBox just resizes the TextBox so that all the text fits on one line making the text really small.
How can I use the ViewBox to resize the text while still using TextWrapping.
Here is my code:
<Viewbox>
<TextBlock Text="The Option text can also dynamically grow/shrink to fit more content. More text to go here....................." TextWrapping="Wrap"/>
</Viewbox>
This is part of a Windows 8 store application so is WinRT Xaml.
Just set a width on the TextBlock.
<Viewbox Width="500">
<TextBlock Width="100" TextWrapping="Wrap">This is the text that's long and on two lines.</TextBlock>
</Viewbox>
So the ViewBox will zoom in/out its entire contents. If you don't restrict its contents by either setting a width on the TextBlock, the ViewBox will give it infinite space to expand into. You can also add a root Grid with a width and height within the ViewBox and lay your elements out in that, then the whole lot will get zoomed according to the width of the ViewBox.
In the image, the width of the TextBlock 100 is zoomed to be the width of the ViewBox which is 500. So to get the wrapping you want, just tweak the TextBlock width until it looks nice.
(Obviously it should say three lines but I'm not re-uploading just for that)
I had the same issue where I had a lot of buttons where I needed a ViewBox to be able to handle localization. The reason for this is that Width is set to Infinity, because the button or control width is determined by the parent control. Fortunately, controls have a property the is called ActualWidth. This property holds a rendered width and I can use this in a binding:
<Button>
<Button.Content>
<Viewbox StretchDirection="DownOnly">
<TextBlock Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Button}}" TextWrapping="Wrap" TextAlignment="Center" Text="{Binding }" />
</Viewbox>
</Button.Content>
</Button>
So the textblock gets the width the Button button currently have. If the button changes width, it is automatically updated. The Textblock will wrap according to the width given and viewbox will only shink when nessesary (providing StretchDirection="DownOnly" is applied).
https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement.actualwidth?view=netframework-4.8
You don't have to fix width or maximum of any control. Use a dummy grid and bind to its ActualWidth. See code https://github.com/omeraziz/NoTextOverflowWPF
<Window Title="NoTextOverflow"
x:Class="NoTextOverflow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="Auto" Height="Auto"
ResizeMode="CanResize" SizeToContent="WidthAndHeight">
<!--
There is no fixed width in any of the UI elements including window, Label, TextBlock, TextBox etc.
Window's SizeToContent grows and shrinks with the contents.
-->
<Grid Margin="10" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label VerticalAlignment="Center" Content="Type Here:" />
<TextBox x:Name="LongText"
Grid.Column="1" Grid.ColumnSpan="2"
Width="{Binding ElementName=WidthRestrictorGrid, Path=ActualWidth, Mode=OneWay}"
MinWidth="100"
Margin="5" HorizontalAlignment="Left" VerticalAlignment="Center"
Text="Type here a long message and resize this window" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" />
<!--
This grid is used to calculate width of middle two columns.
Remove this and its references to see the effect without this grid.
Since this is not parent of TextBox and TextBlock so it must have a Name to bind with its Actualwidth
-->
<Grid x:Name="WidthRestrictorGrid"
Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"
Margin="10,1" HorizontalAlignment="Stretch" />
<TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
Width="{Binding ElementName=WidthRestrictorGrid, Path=ActualWidth, Mode=OneWay}"
MinWidth="50"
Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"
Background="LightGray"
Text="{Binding ElementName=LongText, Path=Text}"
TextWrapping="Wrap" />
<Button Grid.Row="2" Grid.Column="3"
Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom"
Content="Dummy" />
</Grid>
I have a LongListMultiSelector with list items of a larger font-size. Due to this font change, I realized the check-box is always out of alignment to the actual list item. I've tried changing the horizontal and vertical alignment at every level and also adjusted padding and margin values. These change the text-block inside the list item but the check-box stays rooted to the top, and it gives a distorted look to the list.
Is there anyway to have the check-boxes centered vertically or manage its padding? I realized there recent post about margins to the list style, however it seemed rather involved without any straight input to my problem.
I found the solution. You can change margin for grid in datatemplate like this Margin="0,-15,0,22" - in my case top edge of checkbox will be parallel to the top edge of the text.
Hope it will help you.
<toolkit:LongListMultiSelector x:Name="SelectedPlayListLLS" ItemsSource="{Binding PlayListTracsObservationCollection}" LayoutMode="List" toolkit:TiltEffect.IsTiltEnabled="True"> <toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent" Margin="0,-15,0,22">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image x:Name="image"
Width="36"
Height="36"
Source="{Binding Image}" VerticalAlignment="Top" Margin="0,15,0,0"/>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding Title}"
TextTrimming="WordEllipsis"
Margin="12,0,0,0"/>
<TextBlock Text="{Binding Name}"
TextTrimming="WordEllipsis"
Margin="12,0,0,0" Foreground="#99FFFFFF"/>
</StackPanel>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
You could always try putting the checkbox and textblock inside a StackPanel together. From that point you can adjust alignment of the checkbox.
Try something like this:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<CheckBox VerticalAlignment="Top" IsChecked="{Binding Selected}" />
<TextBlock Text="{Binding DisplayName}" FontSize="40"/>
</StackPanel>