windows phone page XAML Preview not showing in Blend and Visual studio - xaml

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 :

Related

Uwp extension binding error. Failed to set "path"

I have code like this:
<Page
x:Class="App4.Views.AddPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4.Views"
xmlns:conv="using:App4.Converters"
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
DataContext="{Binding AddPageInstance, Source={StaticResource Locator}}"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<conv:SalaryConverter x:Key="SalaryConverter"/>
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Padding="20" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300">
<TextBox Text="{x:Bind Vm.Name, Mode=TwoWay}"
x:Name="CharactValidator"
Header="Name"
PlaceholderText="Type Name here"
extensions:TextBoxRegex.ValidationMode="Dynamic"
extensions:TextBoxRegex.ValidationType="Characters"/>
<TextBlock Text="{Binding (extensions:TextBoxRegex.IsValid), ElementName=CharactValidator}"/>
<TextBlock Text="Salary"/>
<TextBox Text="{x:Bind Vm.Salary, Mode=TwoWay, Converter={StaticResource SalaryConverter}}" PlaceholderText="Type Salary here"/>
<TextBlock/>
<TextBlock Text="Title"/>
<TextBox Text="{x:Bind Vm.Title, Mode=TwoWay}" PlaceholderText="Type Title here"/>
<TextBlock/>
<TextBlock Text="Surname"/>
<TextBox Text="{x:Bind Vm.Surname, Mode=TwoWay}" PlaceholderText="Type Surname here"/>
<TextBlock/>
</StackPanel>
</Grid>
The problem is that i have errors connected with extensions:
Unable to convert "Dynamic" to an object of type "Microsoft.Toolkit.Uwp.UI.Extensions.TextBoxRegex+ValidationMode"
Unable to convert "Characters" to an object of type "Microsoft.Toolkit.Uwp.UI.Extensions.TextBoxRegex+ValidationType"
Error Failed to set "Path"
After building the app, it works great. But i don't know how to delete those errors messages and why it appears. If any additional informations are required, please ask me.
Thanks,
Konrad
right click solution -> Clean Solution.
Repeat step 1
close visual studio and reopen it.
Rebuild the solution

XAML fixed banner on top of scrollable area

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>

Differences between emulator layout and phone layout

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.

LongListSelector Turnstile effect isn't working

I have added WP-toolkit to my project, the pages' animation and the LLS tilt effect is working, but not the Turnstile effect. Instead of animating each list items separately, it animates the whole page at the same time. This is my xaml:
<phone:PhoneApplicationPage
x:Class="SzegediMenetrend.V2.V2megallo"
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"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
mc:Ignorable="d"
d:DataContext="{d:DesignData V2.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
toolkit:TiltEffect.IsTiltEnabled="True">
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn" />
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn" />
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut" />
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut" />
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="2-ES VILLAMOS" Style="{StaticResource PhoneTextNormalStyle}" toolkit:TurnstileFeatherEffect.FeatheringIndex="0" />
<TextBlock Text="megállók" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" toolkit:TurnstileFeatherEffect.FeatheringIndex="1" />
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector toolkit:TiltEffect.IsTiltEnabled="True" x:Name="MainLongListSelector" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainLongListSelector_SelectionChanged" toolkit:TurnstileFeatherEffect.FeatheringIndex="2" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
I've tried it both on simple and pivot pages, and it still don't work. What is the problem?
You are using "regular" turnstile transition instead of feathered one. Change it to this.
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Printing a Rendered XAML Form

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.