So I'm building UWP Application that will mainly target phones, but since it can be run on PC and Tablets I used VisualStateManager to correct the layout for bigger screens.
Now Phones also have different screen sizes and I'm looking for a way to simply scale all the components in my page without using Visual state for every single phone and screen resolution out there, or alternatively Using the state manager but without having to re position every single element for every single screen size(between 5" and 6" phones its easy since you can see preview of changes in VS 2015 but for smaller phones its pretty annoying).
here is a sample page from my App:
<Grid>
<Canvas x:Name="canvas">
<Canvas.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/start-01.jpg"/>
</Canvas.Background>
<RelativePanel x:Name="relativePanel" Canvas.Left="-3" Height="612" Canvas.Top="10" >
<Image x:Name="play" HorizontalAlignment="Left" Height="36" Margin="83,271,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
<TextBlock x:Name="playTB" Height="36" Margin="130,265,69.333,0" TextWrapping="Wrap" Text="RACE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"/>
<Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="36" Margin="83,337,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
<TextBlock x:Name="highscoreTB" Height="36" Margin="85,337,76,0" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="194" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
<Image x:Name="storeBT" HorizontalAlignment="Left" Height="36" Margin="83,403,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="storeBT_Tapped"/>
<TextBlock x:Name="storeTB" HorizontalAlignment="Left" Height="36" Margin="124,397,-108,0" TextWrapping="Wrap" Text="STORE" Width="151" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
<Image x:Name="helpBut" HorizontalAlignment="Left" Height="100" Margin="144,522,-3,0" VerticalAlignment="Top" Width="72" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped"/>
<Image x:Name="coinsBG" HorizontalAlignment="Left" Height="19" Margin="295,0,-3,0" VerticalAlignment="Top" Width="56" Source="Assets/comp bar-01.png" Stretch="Fill"/>
<Image x:Name="coinsIC" HorizontalAlignment="Left" Height="19" VerticalAlignment="Top" Width="14" Source="Assets/coins-01.png" Margin="329,1,-3,0"/>
<TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" Margin="303,2,-3,0" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" Width="21" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
<Image x:Name="scoreBG" HorizontalAlignment="Left" Height="23" Margin="13,0,-3,0" VerticalAlignment="Top" Width="136" Source="Assets/comp bar-01.png" Stretch="Fill"/>
<TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="21" Margin="14,2,-3,0" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" Width="48" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
<TextBlock x:Name="scoreTB" HorizontalAlignment="Left" Height="21" Margin="62,2,-3,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="87" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
<Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="36" Margin="83,469,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
<TextBlock x:Name="feedbackTB" Height="36" Margin="96,463,60.667,0" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
</RelativePanel>
</Canvas>
</Grid>
So basiclly I need a way to scale and re position all the elements according to the Grid/Canvas/Relative panel size (They are not really all needed for this page it was just some kind of trials).
Maybe a programmatic way not necessarily altering the XAML code.
Thanks in advance:)
If you want your app to be scalable/reactive, you really should avoid using the Canvas to layout visual elements. Also, when you are using Canvas, you should use the Canvas.Left and Canvas.Top properties to position elements, not the Margin property.
Anyway, the following XAML will provide a scalable layout, similar to your canvas layout but natively resizable to any display. Unfortunately, as I don't have all your assets I can't verify that it exactly matches but have taken some educated guesses about what you're trying to do:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Margin="10">
<Image x:Name="scoreBG" HorizontalAlignment="Left" Height="23" VerticalAlignment="Top" Source="Assets/comp bar-01.png" Stretch="Fill"/>
<TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="21" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1" Margin="10">
<Image x:Name="helpBut" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped"/>
<Image x:Name="coinsBG" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/comp bar-01.png" Stretch="Fill"/>
<Image x:Name="coinsIC" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/coins-01.png"/>
<TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
</StackPanel>
<Grid Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
<Image x:Name="play" Height="36" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
<TextBlock x:Name="playTB" Height="36" TextWrapping="Wrap" Text="RACE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"/>
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
<Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="36" VerticalAlignment="Top" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
<TextBlock x:Name="highscoreTB" Height="36" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="194" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
<TextBlock x:Name="storeTB" HorizontalAlignment="Left" TextWrapping="Wrap" Text="STORE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
<Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="36" VerticalAlignment="Top" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
<TextBlock x:Name="feedbackTB" Height="36" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
</StackPanel>
</Grid>
</Grid>
Note that, in most places, I have removed margins and specified width/height properties as these should be left to auto-size based on the display/DPI/locale.
Hope it helps.
I managed to get what I was looking for with the help of a ViewBox that scales my App automatically to fit screen size:
<Viewbox Stretch="UniformToFill" >
<Grid x:Name="canvas" >
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/start-01.jpg"/>
</Grid.Background>
<Image x:Name="play" Height="34" HorizontalAlignment="Left" Margin="78,281,0,325" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
<TextBlock x:Name="playTB" Height="34" Margin="125,276,90,0" TextWrapping="Wrap" Text="RACE" FontSize="30" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/>
<Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="34" Margin="78,335,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
<TextBlock x:Name="highscoreTB" Height="34" Margin="88,335,82,0" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="100" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
<Image x:Name="storeBT" HorizontalAlignment="Left" Height="34" Margin="78,398,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="storeBT_Tapped"/>
<TextBlock x:Name="storeTB" HorizontalAlignment="Left" Height="34" Margin="111,392,0,0" TextWrapping="Wrap" Text="STORE" Width="151" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
<Image x:Name="helpBut" Height="96" Margin="115,511,122,0" VerticalAlignment="Top" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped" d:LayoutOverrides="HorizontalAlignment, LeftPosition, RightPosition"/>
<Image x:Name="coinsBG" HorizontalAlignment="Left" Height="18" Margin="294,12,0,0" VerticalAlignment="Top" Width="56" Source="Assets/comp bar-01.png" Stretch="Fill"/>
<Image x:Name="coinsIC" HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="14" Source="Assets/coins-01.png" Margin="328,13,0,0"/>
<TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" Margin="302,14,0,0" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" Width="21" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
<Image x:Name="scoreBG" HorizontalAlignment="Left" Height="22" VerticalAlignment="Top" Width="136" Source="Assets/comp bar-01.png" Stretch="Fill" Margin="12,12,0,0" d:LayoutOverrides="HorizontalAlignment"/>
<TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="20" Margin="13,14,0,0" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" Width="48" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
<TextBlock x:Name="scoreTB" HorizontalAlignment="Left" Height="20" Margin="61,14,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="87" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257" d:LayoutOverrides="HorizontalAlignment"/>
<Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="34" Margin="78,461,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
<TextBlock x:Name="feedbackTB" Height="34" Margin="91,455,98,0" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
</Grid>
</Viewbox>
This is what worked for me :)
Related
I have a Windows 8.1 app that will be used on a few different resolutions. I had built the app out in 1920x1080, but the client expects now that if they put it on a laptop with 1440x900 or whatnot, it'll scale down to a certain extent.
My question is, is there some way I can wrap my screens in that will literally scale the application interface as the user scales their screen?
The app is fairly simple. It's a MainPage.Xaml, with several child user controls.
<Grid Background="white">
<MediaElement x:Name="mediaElement" HorizontalAlignment="Left" Height="894" VerticalAlignment="Top" Width="1820" Source="Assets/1920x1080_video_loop.mp4" IsLooping="True" IsMuted="True" Margin="52,156,0,0" Stretch="UniformToFill" Tapped="Body_Tapped"/>
<Rectangle HorizontalAlignment="Left" Margin="50,152,0,0" Stroke="#a7a9ab" VerticalAlignment="Top" StrokeThickness="4" RadiusX="5" RadiusY="5" Height="900" Width="1824"/>
<Image x:Name="image" HorizontalAlignment="Left" Height="50" Margin="53,77,0,0" VerticalAlignment="Top" Width="233" Source="Assets/Raytheon_logo.png"/>
<TextBlock x:Name="txtTitleBlock" HorizontalAlignment="Left" Margin="335,72,0,0" TextWrapping="Wrap" Text="BORDER SECURITY & CRITICAL INFRASTRUCTURE PROTECTION" VerticalAlignment="Top" Height="43" Width="1422" FontFamily="/Assets/Fonts/FrutigerLTCom-Condensed.ttf#Frutiger LT Com, 57 Condensed" FontSize="45.333" Foreground="#FF807E82" CharacterSpacing="-25" />
<TextBlock x:Name="menuItemRA" HorizontalAlignment="Left" Margin="1470,25,0,0" TextWrapping="Wrap" Text="RAYTHEON ADVANTAGE" VerticalAlignment="Top" FontFamily="/Assets/Fonts/FrutigerLTCom-LightCn.ttf#Frutiger LT Com, 47 Light Condensed" FontSize="17.333" CharacterSpacing="-35" Tapped="menuItemRA_Tapped" Foreground="#FF807E82"/>
<TextBlock x:Name="menuItemRALine" HorizontalAlignment="Left" Margin="1623,24,0,0" TextWrapping="Wrap" Text="|" VerticalAlignment="Top" FontFamily="/Assets/Fonts/FrutigerLTCom-LightCn.ttf#Frutiger LT Com, 47 Light Condensed" FontSize="17.333" CharacterSpacing="-35" Foreground="#FF807E82"/>
<TextBlock x:Name="menuItemTS" HorizontalAlignment="Left" Margin="1633,25,0,0" TextWrapping="Wrap" Text="TAILORED SOLUTIONS" VerticalAlignment="Top" FontFamily="/Assets/Fonts/FrutigerLTCom-LightCn.ttf#Frutiger LT Com, 47 Light Condensed" FontSize="17.333" CharacterSpacing="-35" Tapped="menuItemTS_Tapped" Foreground="#FF807E82"/>
<TextBlock x:Name="Line" HorizontalAlignment="Left" Margin="1769,24,0,0" TextWrapping="Wrap" Text="|" VerticalAlignment="Top" FontFamily="/Assets/Fonts/FrutigerLTCom-LightCn.ttf#Frutiger LT Com, 47 Light Condensed" FontSize="17.333" CharacterSpacing="-35" Foreground="#FF807E82"/>
<TextBlock x:Name="menuItemCU" HorizontalAlignment="Left" Margin="1777,25,0,0" TextWrapping="Wrap" Text="CONTACT US" VerticalAlignment="Top" FontFamily="/Assets/Fonts/FrutigerLTCom-LightCn.ttf#Frutiger LT Com, 47 Light Condensed" FontSize="17.333" CharacterSpacing="-35" RenderTransformOrigin="0.471,0.545" Width="101" Foreground="#FF807E82" Tapped="menuItemCU_Tapped"/>
<Rectangle Name="MenuBar01" HorizontalAlignment="Left" Height="7" Margin="1470,13,0,0" VerticalAlignment="Top" Width="145" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02" HorizontalAlignment="Left" Height="7" Margin="1633,13,0,0" VerticalAlignment="Top" Width="131" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar03" HorizontalAlignment="Left" Height="5" Margin="1778,13,0,0" VerticalAlignment="Top" Width="77" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_01" HorizontalAlignment="Left" Height="7" Margin="1633,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_02" HorizontalAlignment="Left" Height="7" Margin="1646,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_03" HorizontalAlignment="Left" Height="7" Margin="1659,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_04" HorizontalAlignment="Left" Height="7" Margin="1672,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_05" HorizontalAlignment="Left" Height="7" Margin="1685,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_06" HorizontalAlignment="Left" Height="7" Margin="1698,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_07" HorizontalAlignment="Left" Height="7" Margin="1711,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_08" HorizontalAlignment="Left" Height="7" Margin="1724,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_09" HorizontalAlignment="Left" Height="7" Margin="1737,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<Rectangle Name="MenuBar02_10" HorizontalAlignment="Left" Height="7" Margin="1750,13,0,0" VerticalAlignment="Top" Width="13.1" Fill="#FFE21836" Visibility="Collapsed"/>
<local:Page01 Margin="54,156,48,10" x:Name="Page01" Tapped="Body_Tapped" />
<local:Page29 Margin="54,156,48,10" x:Name="Page29" Visibility="Collapsed" Opacity="0"/>
<local:Page03 Margin="32,156,29,10" x:Name="Page03" Visibility="Collapsed" Opacity="0"/>
<local:Page11 Margin="54,156,48,10" x:Name="Page11" Visibility="Collapsed" Opacity="0"/>
<local:Page02 Margin="53,156,48,0" x:Name="Page02" Visibility="Collapsed" Opacity="0" />
<Image x:Name="imgFooter1" HorizontalAlignment="Left" Height="100" Margin="908,981,0,-1" VerticalAlignment="Top" Width="100" Source="Assets/1920x1080_StartHere.png" Tapped="Body_Tapped"/>
<Image x:Name="imgFooter2" HorizontalAlignment="Left" Height="100" Margin="680,894,0,0" VerticalAlignment="Top" Width="582" Source="Assets/1920x1080_Tagline.png" Tapped="Body_Tapped"/>
</Grid>
Any help would be greatly appreciated.
I am not able to have a user input in a textbox when click it both in the Emulator and in windows phone device. I have deleted all the textboxes and replace them with new ones without any special preferences and still don't work. I have implemented the whole interface of my application and need help to solve this issue and start playing with the server connection. Also the rest of the controls all work properly. Please any ideas?
This is the corresponding interface of the code I am posting below.
This is my mainpage.xaml code: If you need anything else please let me know.
<controls:ViewPage
x:Class="Menu_and_Topbar_app__Windows_Phone_8._1_3.MainPage"
xmlns:controls="using:Menu_and_Topbar_app__Windows_Phone_8._1_3.Controls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Menu_and_Topbar_app__Windows_Phone_8._1_3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#FF250D5C">
<ScrollViewer HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5.857,6.897,8.265,12.783" RenderTransformOrigin="0.5,0.5" Height="620.32" UseLayoutRounding="False" Width="385.878" d:LayoutRounding="Auto">
<ScrollViewer.RenderTransform>
<CompositeTransform Rotation="0.309"/>
</ScrollViewer.RenderTransform>
<Pivot Name="MyPivot" IsEnabled="True" IsTapEnabled="True">
<Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="37" SelectionHighlightColor="#FF898888" />
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem x:Name="PivotItem1" Header="Sign In" IsEnabled="True" IsTapEnabled="True">
<Grid HorizontalAlignment="Left" Height="496" Margin="18,19,0,0" VerticalAlignment="Top" Width="311" IsTapEnabled="True" IsRightTapEnabled="True">
<Image x:Name="image" HorizontalAlignment="Left" Height="70" Margin="64,9,0,0" VerticalAlignment="Top" Width="193" Source="/Menu and Topbar app (Windows Phone 8.1)3/Pictures/logo.png" Visibility="Visible" />
<Button x:Name="button" Content="Log In" HorizontalAlignment="Left" Margin="98,409,0,0" VerticalAlignment="Top" Click="button_Click_1"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="16,113,0,0" TextWrapping="Wrap" Text="Username or Email:" VerticalAlignment="Top" FontSize="16"/>
<TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="16,210,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top" FontSize="16"/>
<HyperlinkButton Content="Sign Up for SCP?" HorizontalAlignment="Left" Margin="17,266,0,0" VerticalAlignment="Top" FontSize="13.333" NavigateUri="http://scponline.azurewebsites.net/Home/LoginPartialView"/>
<CheckBox x:Name="checkBox" Content="Remember me?" HorizontalAlignment="Left" Margin="17,312,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Margin="17,137,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="275" GotFocus="textBox_GotFocus" AllowDrop="True" />
</Grid>
</PivotItem>
<PivotItem x:Name="PivotItem2" Header="Sign Up" >
<Grid HorizontalAlignment="Left" Height="496" Margin="18,19,0,0" VerticalAlignment="Top" Width="311">
<Button Content="Sign Up" HorizontalAlignment="Left" Margin="97,437,0,0" VerticalAlignment="Top" Click="Button_Click_2"/>
<TextBlock x:Name="textBlock3" HorizontalAlignment="Left" Margin="16,108,0,0" TextWrapping="Wrap" Text="Email:" VerticalAlignment="Top" FontSize="16"/>
<TextBlock x:Name="textBlock4" HorizontalAlignment="Left" Margin="16,168,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top" FontSize="16"/>
<TextBox x:Name="textBox3" HorizontalAlignment="Left" Margin="16,126,0,0" TextWrapping="Wrap" Text="username#mail.com" VerticalAlignment="Top" Height="0" Width="276" FontSize="17.593" RenderTransformOrigin="0.5,0.5">
<TextBox.RenderTransform>
<CompositeTransform ScaleY="0.9"/>
</TextBox.RenderTransform>
</TextBox>
<TextBox x:Name="textBox4" HorizontalAlignment="Left" Margin="16,187,0,0" TextWrapping="Wrap" Text="***********" VerticalAlignment="Top" Height="0" Width="276" TextChanged="textBox2_TextChanged" FontSize="17.593" RenderTransformOrigin="0.5,0.5">
<TextBox.RenderTransform>
<CompositeTransform ScaleY="0.9"/>
</TextBox.RenderTransform>
</TextBox>
<Image x:Name="image1" HorizontalAlignment="Left" Height="70" Margin="64,9,0,0" VerticalAlignment="Top" Width="193" Source="/Menu and Topbar app (Windows Phone 8.1)3/Pictures/logo.png"/>
<TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Margin="16,232,0,0" TextWrapping="Wrap" Text="Name:" VerticalAlignment="Top" SelectionChanged="textBlock1_SelectionChanged" FontSize="16"/>
<TextBox x:Name="textBox5" HorizontalAlignment="Left" Margin="16,250,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="0" Width="276" TextChanged="textBox2_TextChanged" FontSize="17.593" RenderTransformOrigin="0.5,0.5">
<TextBox.RenderTransform>
<CompositeTransform ScaleY="0.9"/>
</TextBox.RenderTransform>
</TextBox>
<TextBlock x:Name="textBlock5" HorizontalAlignment="Left" Margin="16,292,0,0" TextWrapping="Wrap" Text="Name:" VerticalAlignment="Top" SelectionChanged="textBlock1_SelectionChanged" FontSize="16"/>
<TextBox x:Name="textBox6" HorizontalAlignment="Left" Margin="16,310,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="0" Width="276" TextChanged="textBox2_TextChanged" FontSize="17.593" RenderTransformOrigin="0.5,0.5">
<TextBox.RenderTransform>
<CompositeTransform ScaleY="0.9"/>
</TextBox.RenderTransform>
</TextBox>
</Grid>
</PivotItem>
</Pivot>
</ScrollViewer>
</Grid>
I have seen many questions on the same topic here, and tried almost all solutions recommended, But still not getting it cleared. So please kindly let me know any new updates on this.
<UserControl x:Class="ClinicManagement_Forms.ClinicDetails"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:view="clr-namespace:ClinicManagement_Forms"
mc:Ignorable="d" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="875" Height="474">
<UserControl.DataContext>
<view:ClinicRegistrationViewModel/>
</UserControl.DataContext>
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="LeftErrorTemplate">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding AdornedElement.(Validation.Errors).[0].ErrorContent, ElementName=ErrorAdorner}" Background="LightCoral" Foreground="White" VerticalAlignment="Center"/>
<AdornedElementPlaceholder x:Name="ErrorAdorner">
<Border BorderBrush="LightCoral" BorderThickness="1" />
</AdornedElementPlaceholder>
</StackPanel>
</ControlTemplate>
</Grid.Resources>
<TextBlock HorizontalAlignment="Left" Margin="2,0,0,444" TextWrapping="Wrap" Text="Clinic Registration" VerticalAlignment="Bottom" Width="873" Height="30" TextAlignment="Center" FontSize="18" FontFamily="Showcard Gothic" />
<TextBlock HorizontalAlignment="Left" Margin="91,99,0,0" TextWrapping="Wrap" Text="Clinic Name" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="202,96,0,0" TextWrapping="Wrap" Text="{Binding CliicRegistation.ClinicName , UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource LeftErrorTemplate}" VerticalAlignment="Top" Width="200"/>
<TextBlock HorizontalAlignment="Left" Margin="91,136,0,0" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" VerticalScrollBarVisibility="Visible" Height="58" Margin="202,133,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="200" AcceptsReturn="True"/>
<TextBlock HorizontalAlignment="Left" Margin="91,210,0,0" TextWrapping="Wrap" Text="Place" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="202,207,0,0" TextWrapping="Wrap" Text="{Binding CliicRegistation.Place, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="200"/>
<TextBlock HorizontalAlignment="Left" Margin="91,250,0,0" TextWrapping="Wrap" Text="Phone No" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="202,247,0,0" TextWrapping="Wrap" Text="{Binding CliicRegistation.PhonNo , UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource LeftErrorTemplate}" VerticalAlignment="Top" Width="200" IsReadOnlyCaretVisible="True"/>
<TextBlock HorizontalAlignment="Left" Margin="91,289,0,0" TextWrapping="Wrap" Text="User Name" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="202,286,0,0" TextWrapping="Wrap" Text="{Binding CliicRegistation.UserName, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="200"/>
<TextBlock HorizontalAlignment="Left" Margin="91,329,0,0" TextWrapping="Wrap" Text="Password" VerticalAlignment="Top"/>
<PasswordBox HorizontalAlignment="Left" Height="23" Margin="202,329,0,0" Name="passwordBox1" Validation.ErrorTemplate="{StaticResource LeftErrorTemplate}" VerticalAlignment="Top" Width="200"/>
<TextBlock HorizontalAlignment="Left" Margin="91,367,0,0" TextWrapping="Wrap" Text="Confirm Password" VerticalAlignment="Top"/>
<PasswordBox HorizontalAlignment="Left" Height="23" Margin="202,367,0,0" PasswordChar="{Binding CliicRegistation.ConformPassword, Mode=TwoWay ,UpdateSourceTrigger=PropertyChanged}" Validation.ErrorTemplate="{StaticResource LeftErrorTemplate}" VerticalAlignment="Top" Width="200"/>
<Button IsEnabled="{Binding CliicRegistation.AllPropertiesValid}" Content="Save" Command="{Binding SaveCommand}" HorizontalAlignment="Left" Margin="202,441,0,0" VerticalAlignment="Top" Width="75"/>
<Button IsEnabled="{Binding CliicRegistation.AllPropertiesValid}" Content="Delete" HorizontalAlignment="Left" Margin="299,441,0,0" VerticalAlignment="Top" Width="75"/>
<Button Content="Clear" HorizontalAlignment="Left" Margin="397,441,0,0" VerticalAlignment="Top" Width="75"/>
<Image HorizontalAlignment="Left" Height="100" Margin="536,89,0,0" VerticalAlignment="Top" Width="100"/>
<Image HorizontalAlignment="Left" Height="100" Margin="561,89,0,0" VerticalAlignment="Top" Width="148" OpacityMask="#FFD44949"/>
<Button Content="Select" HorizontalAlignment="Left" Margin="559,207,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="5.053,-10.4"/>
<Button Content="Clear" HorizontalAlignment="Left" Margin="647,208,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="5.053,-10.4"/>
</Grid>
It is the code I had tried, when i click on design mode, This error is shown.
Thanks in advance
I am building an app in Windows Phone 7.
I am showing a few data in different TextBlocks.
But as the data size is too big, it doesn't fit in my view.
I want to show the data like a paragraph.
If the data size exceeds the size of the emulator I want to put a ScrollBar so that the data can be scrolled and viewed.
Please help me.
I am providing my XAML design.
<Grid x:Name="ContentPanel" Margin="12,17,12,0" Grid.RowSpan="2">
<TextBlock TextAlignment="Center" Height="63" HorizontalAlignment="Right" Margin="0,6,43,0" Name="textBlock1" Text="News Details" VerticalAlignment="Top" Width="308" FontFamily="Verdana" FontSize="48" Foreground="AntiqueWhite"/>
<TextBlock Height="46" HorizontalAlignment="Left" Margin="45,333,0,0" Name="date" Text="" VerticalAlignment="Top" Width="173" FontFamily="Verdana" FontSize="24" />
<TextBlock Height="43" HorizontalAlignment="Left" Margin="45,397,0,0" Name="title" Text="" VerticalAlignment="Top" Width="373" />
<TextBlock Height="206" HorizontalAlignment="Left" Margin="45,462,0,0" Name="description" Text="" VerticalAlignment="Top" Width="373" />
<Image Height="167" HorizontalAlignment="Left" Margin="45,113,0,0" Name="newsimage" Stretch="Fill" VerticalAlignment="Top" Width="368" />
</Grid>
<Button x:Name="previous" BorderThickness="0" Click="Image_Back" Margin="0,23,431,682" HorizontalAlignment="Right" Width="76" Height="63" Grid.RowSpan="2">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Image/Previous.png" />
</Button.Background>
</Button>
</Grid>
Try this,
<Grid x:Name="ContentPanel" Margin="12,17,12,0" Grid.RowSpan="2">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Height="63" HorizontalAlignment="Right" Margin="0,6,43,0" Name="textBlock1" Text="News Details" VerticalAlignment="Top" Width="308" FontFamily="Verdana" FontSize="48" Foreground="AntiqueWhite"/>
<TextBlock TextWrapping="Wrap" Height="46" HorizontalAlignment="Left" Margin="45,333,0,0" Name="date" Text="" VerticalAlignment="Top" Width="173" FontFamily="Verdana" FontSize="24" />
<TextBlock TextWrapping="Wrap" Height="43" HorizontalAlignment="Left" Margin="45,397,0,0" Name="title" Text="" VerticalAlignment="Top" Width="373" />
<TextBlock TextWrapping="Wrap" Height="206" HorizontalAlignment="Left" Margin="45,462,0,0" Name="description" Text="" VerticalAlignment="Top" Width="373" />
<Image Height="167" HorizontalAlignment="Left" Margin="45,113,0,0" Name="newsimage" Stretch="Fill" VerticalAlignment="Top" Width="368" />
</Grid>
</ScrollViewer>
</Grid>
More details
http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer(v=vs.110).aspx
http://dotnet.dzone.com/news/scrollviewer-not-scrollable
Try using Scrollable textblock. Hope that help you to solve the issue.
How could we arrange the controls on a WPF window so that it would automatically align the controls while switching between view modes occur ie between landscape and portrait mode.
<Window x:Class="Custom_Track_Reports.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LoginWindow" >
<Viewbox Stretch="Fill">
<Grid Background="#FF58B0DF" Height="401">
<Rectangle Fill="#FFF0F3F4" Height="173" Margin="45,197,58,0" Stroke="Black" VerticalAlignment="Top" AllowDrop="True" />
<Image Height="125" Margin="340,10,330,0" VerticalAlignment="Top" Source="Images/logo_lrg.png"/>
<Label Content="Custom Track Reports" HorizontalAlignment="Left" Margin="287,147,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.607,1.112" Width="268" Height="47" FontFamily="Arial" FontSize="26" Foreground="White"/>
<TextBox Margin="128,0,0,110" TextWrapping="Wrap" VerticalAlignment="Bottom" Height="25" BorderThickness="1" FontFamily="Arial" FontSize="21" Text="" Name="userTextBox" FontStretch="Expanded" Opacity="1" HorizontalAlignment="Left" Width="546" AcceptsReturn="False" KeyDown="userTextBox_KeyDown" />
<Button x:Name="enterButton" Content="Enter" HorizontalAlignment="Right" Margin="0,311,166,0" VerticalAlignment="Top" Width="110" Height="26" FontSize="14" Style="{DynamicResource button}" Click="enterButton_Click"/>
<Label Content="User ID" FontSize="20" FontWeight="Bold" Height="40" HorizontalAlignment="Left" Margin="122,215,0,0" Name="label1" VerticalAlignment="Top" Width="105" />
</Grid>
</Viewbox>