here is my issue :
I am develloping an application where there is a Walkthrought, to make it I used Page Panorama, the problem is that I need to keep an element (button) completly still while the user can navigate throught the Panorama.
P.S.: I am beginnier in Windows phone, so if the answer appears obvious for other, I'll be glad to have a clue
It really depends on your layout, but using a grid is likely the best solution:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Hello world!" />
<Panorama Grid.Row="1"></Panorama>
</Grid>
Related
I discovered this issue in real complex project, but it's reproducible with simple test project. So I have the test UWP page
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid
VerticalAlignment="Top"
HorizontalAlignment="Left"
Height="100">
<Grid.Projection>
<PlaneProjection GlobalOffsetY="100"/>
</Grid.Projection>
<ScrollViewer
VerticalScrollMode="Enabled"
VerticalScrollBarVisibility="Visible">
<StackPanel>
<Button Content="1"/>
<Button Content="2"/>
<Button Content="3"/>
<Button Content="4"/>
<Button Content="5"/>
<Button Content="6"/>
<Button Content="7"/>
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
it works as expected in PC version, but scroller doesn't work in mobile (windows phone) version. the same story with Windows Phone 8.1
If to comment projection on parent grid - everything is ok.
Any ideas of fix or at least workaround for that issue?
it works as expected in PC version, but scroller doesn't work in mobile (windows phone) version.
By design,if a global transform of scrollviewer(Projection Transform here) can't be represented as a Matrix Transform, the underlying layer that handles touch interaction can't be used.
So if you only need to apply GlobalOffsetY or GlobalOffsetX. I recommend you using TranslateTransform instead. It won't prevent ScrollViewer from scrolling:
<Grid
VerticalAlignment="Top"
HorizontalAlignment="Left"
Height="500" Width="200">
<Grid.RenderTransform>
<TranslateTransform Y="100"/>
</Grid.RenderTransform>
<ScrollViewer
VerticalScrollMode="Enabled"
VerticalScrollBarVisibility="Visible">
<StackPanel>
<Button Content="1"/>
<Button Content="2"/>
<Button Content="3"/>
<Button Content="4"/>
<Button Content="5"/>
<Button Content="6"/>
<Button Content="7"/>
</StackPanel>
</ScrollViewer>
</Grid>
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 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/
I'm developing a windows phone 8 application.
I've got a textblock with a price in it.
Only thing I want to do is a line through the textblock.
I've tried to use the Line function but that one doesn't work because the textblock has a variable length.
Does anyone know how I can make this happen?
This worked for me thanks to Chkon for giving me the answer in this thread:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Some text" VerticalAlignment="Top" Grid.RowSpan="2"/>
<Border BorderThickness="0,0,0,1" BorderBrush="#FF949494" >
</Border>
</Grid>
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>