I have a problem, because I can't understand why the layout of my app is different when I run it on my phone. The buttons are moved a bit to the right. Screenshot at the link:
On emulator it looks correctly, the items are centered. I'm using Visual Studio Express.
<Page
x:Class="App6.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App6"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid HorizontalAlignment="Right" Margin="0,0.333,0,-0.333" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="59*"/>
<RowDefinition Height="625*"/>
</Grid.RowDefinitions>
<Button Content="Kliknij" HorizontalAlignment="Center" Click="Button_Click" RenderTransformOrigin="0.585,-5.095" Margin="146,499.253,145,69" Grid.Row="1" />
<TextBlock x:Name="costam" Margin="96,202.253,102,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" FontSize="36" HorizontalAlignment="Center" Width="202" Text="kj." Grid.Row="1"/>
<Button x:Name="schowaj" Content="Schowaj" HorizontalAlignment="Left" Margin="139,410.253,0,0" VerticalAlignment="Top" Click="schowaj_Click" Grid.Row="1"/>
<TextBox x:Name="wpisz" HorizontalAlignment="Left" Margin="139,297.253,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="109" Grid.Row="1"/>
<Button x:Name="zamien" Content="Zamień" HorizontalAlignment="Left" Margin="139,351.253,0,0" VerticalAlignment="Top" Click="zamien_Click" Grid.Row="1"/>
</Grid>
The emulator you use probably has a different resolution or screen size that your device. The main problem is you are using margins to position your element, which is totally wrong and resolution/screen size dependent. Just us a Grid and split it into a few rows.
Related
I'm trying to add a banner that remains fixed in the window to my page and I'm having a tough time.
This is what I am trying to achieve: I want a banner that floats at the top of the window (for an ad), then I want the rest of the content in a scrollable area. First item should be a textBlock, then a textBox, then a button.
This is the code I've got now and it looks right except for the scrolling. Help would be appreciated.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Universal="using:Microsoft.AdMediator.Universal"
x:Class="App2.MainPage"
mc:Ignorable="d" RequestedTheme="Dark">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Grid.RowSpan="3">
<Universal:AdMediatorControl x:Name="AdMediatorName" Height="90" Id="AdMediator-Id" Margin="10,0"/>
<ScrollViewer x:Name="myScrollViewer" VerticalScrollMode="Enabled">
<StackPanel Grid.RowSpan="2">
<TextBlock x:Name ="outputConsole" FontSize="15" RenderTransformOrigin="0.5,0" TextWrapping="WrapWholeWords" Margin="0,0,10,0" FontFamily="Consolas" IsTextSelectionEnabled="True">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
<TextBlock.Projection>
<PlaneProjection/>
</TextBlock.Projection>
<Run/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBox x:Name="inputConsole" FontSize="20" KeyUp="inputKeyUp" Margin="0,0,10,0" FontFamily="Consolas" IsTapEnabled="True" IsTextPredictionEnabled="True"/>
<Button x:Name="submitButton" Content="Submit" Click="submitButtonClick"/>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</Page>
I figured it out. I just needed to put it directly in the grid. Sorry, still learning XAML.
You just answered your question. You have to do something like this,
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal"><TextBlock x:Name ="outputConsole" FontSize="15" RenderTransformOrigin="0.5,0" TextWrapping="WrapWholeWords" Margin="0,0,10,0" FontFamily="Consolas" IsTextSelectionEnabled="True">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
<TextBlock.Projection>
<PlaneProjection/>
</TextBlock.Projection>
<Run/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBox x:Name="inputConsole" FontSize="20" KeyUp="inputKeyUp" Margin="0,0,10,0" FontFamily="Consolas" IsTapEnabled="True" IsTextPredictionEnabled="True"/>
<Button x:Name="submitButton" Content="Submit" Click="submitButtonClick"/>
</StackPanel>
<ScrollViewer Grid.Row="1">
</ScrollViewer>
i have not able to achieve horizontally scroll zoomed image... vertical zoom is successful using this Xaml... Kindly help solving horizontal scroll of a zoomed image FOR windows phone 8.1 u1...
REGARDS
enter code here <Page
x:Class="Bus_Time.BasicPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Bus_Time"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0">
<TextBlock Text="MY APPLICATION" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>
<TextBlock Text="page title" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel>
<Grid Margin="0,8.833,0,10" Grid.Row="1">
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="0.8" Height="Auto" Width="Auto">
<StackPanel Height="Auto" Width="Auto" Orientation="Vertical" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Enabled" HorizontalAlignment="Stretch">
<Image Source="Assets/Image1/0001.jpg" HorizontalAlignment="Stretch" Height="350" Width="380"/>
<Image Source="Assets/Image1/0002.jpg" HorizontalAlignment="Stretch" Height="350" Width="300"/>
<Image Source="Assets/Image1/0003.jpg" HorizontalAlignment="Stretch" Height="350" Width="380"/>
<Image Source="Assets/Image1/0004.jpg" HorizontalAlignment="Stretch" Height="350" Width="380"/>
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
Are you sure that the content doesn't fit in your ScrollViewer? Width of the images is 380, that's less than a page size for Windows and Windows Phone alike.
Anyway, you can try setting HorizontalScrollBarVisibility to Auto or Visible.
I have written code in mainpage.xaml in universal app project and windows phone 8.1 section. The preview in visual studio and blend is showing as empty. Pictures are attached.
NO TEXT of text block set from back c# code. all code is set here.
Windows phone ouput is also attached.
Following is the code
<Page
x:Class="PakistanNewspapers.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PakistanNewspapers"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Hub>
<Hub.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="lblHeader" Text="Pakistani Newspapers"></TextBlock>
</DataTemplate>
</Hub.HeaderTemplate>
<HubSection Header="Urdu Newspapers" >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical">
<GridView>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,0" Orientation="Horizontal">
<Image x:Name="txtNewspaperImage" Height="60" Width="60" VerticalAlignment="Center" Margin="0,0,10,0"/>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="txtNewspaperHeader" TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="14.667" FontWeight="Light" Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Segoe UI"/>
<TextBlock x:Name="txtNewsHeader" TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="14.667" FontWeight="Light" Width="200" MaxHeight="20" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="English Newspapers"/>
<HubSection Header="About"/>
</Hub>
While the preview in visual studio and blend is showing as :
I can't seem to find a solution for this issue. I have a simple form which I created as a test for an insurance log file. When I open the xaml file in the web browser (IE 8) it displays the form properly, but when I go to print it to a printer, the dialog box appears as normal, but nothing happens after hitting the print button. Ultimately I'd need this to print as part of a document imaging system, but I was using the web browser to single out that variable.
I am very new to xaml, so I may have overlooked something simple to enable the rendered form to be printed. Is there something that needs to be added to the code somewhere? Or do I need to add a driver to my printer to be able to compile XAML into a printable format? Below is the code that I have currently. I'm using WPF with Visual Studio Express 2013. Thanks!
<Grid x:Name="Form"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="620" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid.Resources>
<XmlDataProvider x:Key="xmlData" XPath="/data" IsAsynchronous="False">
<x:XData>
<data xmlns="">
</data>
</x:XData>
</XmlDataProvider>
</Grid.Resources>
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="79*"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="POLICY HANDLING - INCEPTION" VerticalAlignment="Center" TextAlignment="Center" Height="12" Margin="0,4"/>
</Grid>
<Grid VerticalAlignment="Top" HorizontalAlignment="Right" Width="120" Height="40">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" TextWrapping="NoWrap" Width="40" TextAlignment="Center" BorderThickness="0,0,0,3" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<TextBox Grid.Column="0" TextWrapping="NoWrap" Width="40" TextAlignment="Center" BorderThickness="0,0,0,3" VerticalAlignment="Top" Grid.Row="1" HorizontalAlignment="Right"/>
<TextBlock Grid.Column="2" TextWrapping="NoWrap" Text="TEAM" Height="14" FontSize="10" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock TextWrapping="NoWrap" Text="TIA PRODUCER" VerticalAlignment="Center" Height="14" FontSize="10" Grid.Column="1" Margin="0,3" Grid.Row="1" HorizontalAlignment="Left"/>
</Grid>
</Grid>
I believe I have it figured out now. I gave the grid/form a background color ("White") and it prints just fine now. It had been transparent before. It must be a constraint of the document imaging system we're using.
I'm wondering if anyone know of a way to set a property or setting on a phone app so that the ScrollViewer uses less of a memory cache. I currently have an app that displays images on the screen, and even with an algorithm that makes sure that only images that are close to or intersect the screen are visible, I still run out of memory occasionally when I happen to be zoomed in with lots of images nearby.
As an example, the XAML below would eat up 125MB out of 300, and that's with just blank white canvases.
<phone:PhoneApplicationPage
x:Class="DemoScroller.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<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 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-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Canvas Width="2000" Height="8000">
<Canvas Width="990" Height="1990" Background="White"/>
<Canvas Width="990" Height="1990" Canvas.Left="1010" Background="White"/>
<Canvas Width="990" Height="1990" Canvas.Top="2000" Background="White"/>
<Canvas Width="990" Height="1990" Canvas.Left="1010" Canvas.Top="2000" Background="White"/>
<Canvas Width="990" Height="1990" Canvas.Top="4000" Background="White"/>
<Canvas Width="990" Height="1990" Canvas.Left="1010" Canvas.Top="4000" Background="White"/>
</Canvas>
</ScrollViewer>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
I can't use a listbox or something like that, as the images don't really line up this nicely in my app.
Any suggestions?
Thanks!
Tomas
Making an image invisible doesn't stop it being decoded into its uncompressed form which takes a lot of memory, especially if it is large.
You will need a more efficient way of "virtualizing" your images that unloads the images completely when they are out of view. That is what LongListSelector can give you. ScrollViewer doesn't do this.