TextBox Alignment When Printing From UWP - xaml

I'm trying to print a page of text from a UWP app, but I'm having a problem with alignment. First of all, I've created a Page which contains the following xaml:
<Grid Background="White">
<TextBlock Text="Welcome Printed World!" FontSize="36" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
Notice how the TextBlock is aligned to be centered within the grid.
Then, I print it using the various PrintDocument event handlers; this the code to print preview it (simplified to ignore margins and the non-printable area):
Page printPage;
private void OnPrintDocumentPaginate(object sender, PaginateEventArgs e)
{
// Construct an instance of the page to print, and tell Windows that there is only 1 page
this.printPage = new PrintPage();
printDocument.SetPreviewPageCount(1, PreviewPageCountType.Final);
}
private void OnPrintDocumentGetPreviewPage(object sender, GetPreviewPageEventArgs e)
{
// Give Windows a reference to the page to print for preview
this.printDocument.SetPreviewPage(e.PageNumber, this.printPage);
}
And this is how it prints:
Notice that the TextBlock is not centered.
However, if I wrap the TextBlock in a border, like this:
<Grid Background="White">
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Welcome Printed World!" FontSize="36" Foreground="Black"/>
</Border>
</Grid>
Then it is fine:
Can anybody see why the TextBlock is not centred when using the original xaml?

I experienced the same problem when upgrading from Windows 8.1 to UWP project.
When printing in UWP, the TextBlock.VerticalAlignment and TextBlock.HorizontalAlignment properties do not work as expected.
However, if you use a Run element instead of the TextBlock.Text property, they appear to work as expected:
<TextBlock FontSize="36" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
<Run Text="Welcome Printed World!" />
</TextBlock>
Alternatively you can use TextBlock.Margin for vertical alignment and TextBlock.TextAlignment for horizontal alignment.

Related

Add text on MediaElement fullscreen

I'd like to add text on WindowsPhone 8.1 MediaElement fullscreen mode, but I cannot get it visible.
Here is my code:
<Grid>
<MediaElement Name="MyMedia" IsFullWindow="True" MarkerReached="MyMedia_MarkerReached"/>
<TextBlock x:Name="MediaTitles" Text="Hello World" HorizontalAlignment="Left" Margin="55,240,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="99" Width="270" FontSize="48" />
</Grid>
Any ideas what I'm doing wrong?
The property IsFullWindow="True" is causing the problem. As you might know by now. If I want the media element full screen I usually add it to the grid and span across 1 for column and row. Something like below:
<MediaElement
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="1"
Grid.ColumnSpan="1" />
This gives the same effect as full screen on the device. And you can see your Hello world text in the Designer.

Screen does not display full content of string

i'm using the textblock to display the content,but for the long content, it just cut off and not display the content fully while i'm sure that the i filled the content string. Pls show me where my code is wrong. Thanks
Link of the my screen: www.flickr.com/photos/37903269#N05/15332152972/
my xaml code :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<!-- <phone:WebBrowser VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="webBrowser1" /> -->
<ListBox Name="Listbox_DetailPage">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Content}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextNormalStyle}"
HorizontalAlignment="Center"
/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
I executed the code shared and it seems to wrap text as shown in the screen shot below.
The screenshot you shared seems to have vertical cropping of the text as well. For that, we can set the ScrollViewer.VerticalScrollBarVisibility to 'Auto' with proper Height given.
Also, for your additional knowledge or may be future use, here are some stackoverflow questions which explains the text 'NOT WRAPPING' issue for StackPanel
TextBlock TextWrapping not wrapping inside StackPanel
TextBlock TextWrapping not wrapping
actually, i fixed it.Because of the limitation of sing UI: 4096px limit of size. So there is a need to split the long content in the more than one TextBlock or you can create a scrollabe textbock as here

GridView vs Buttons

I have a grid of 12 non clickable buttons(they are just indicators) in the center of my page in the following manner.
There is going to be more stuff around this grid and I need the items to be at their exact place and of the same width and height. I am confused whether to use a grid with (star sized) rows and columns with buttons in them or a gridview with a wrap panel with MaxRowsAndColumns set to 3 and Orientation set to Horizontal. Here are my arguments for and against each of the approaches:-
Buttons:-
Pros:-
Fixed position and height and width guaranteed.
Adaptable to all screen sizes
Easy to code
Cons:-
Will have to write a very large XAML and C# code because I will not be able to use Data Template here and will have to define lots of variables and grids and set values of each textblock separately.
GridView
Pros:-
DataTemplate available so easy to set values via ObservableCollection
Smaller code than the one created using buttons
Cons:-
No guarantees of item size. Will have to hard code it in XAML or Bind it to properties in Model and then calculate the value inside XAML.
Please let me know which one is the better alternative.
Is there any other easier way to do it apart from the methods mentioned above?
Thanks,
Rajeev
Use ItemsControl, it offers DataTemplate as well as item size.
Out of the two above I would say GridView. Since you need to support so many different screen sizes and ratios you shouldn't have fixed sizes.
As the guidelines states: Guidelines for window sizes and scaling to screens(Windows Store apps)
Design apps that look good at any width, and you automatically get
support for different screen sizes and orientations. Plan your app for
resizing from full screen down to the minimum width so that the UI
reflows gracefully for various screen sizes, window sizes, and
orientations.
Since you also need to cater for the snapped mode (which you can't choose not to have in you application) having buttons will add even more manual work which means a lot of hard to maintain UI code. If you use a gridview you can pair it up with a listview for the snapped mode (gridview for full mode, listview for snapped) as in the templates.
You can certainly restrict the sizes in a GridView without it require even a fifth of the work needed for buttons, so I'm not quite sure what you mean by "No guarantees of item size".
Anyway, as the guidelines says, buttons should NOT be used for navigation to a page. These are just guidelines, but I reckon they make sense.
Here are: Guidelines and checklist for buttons (Windows Store apps)
Don't use a button when the action is to navigate to another page; use
a link instead. Exception: For wizard navigation, use buttons labeled
"Back" and "Next".
I would use GriView and combine it with a semantic zoom if appropriate.
Example with GridView and ItemsControl, here is the result:
Code for the UI (View):
<Page
x:Class="App1.MainPage"
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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<GridView x:Name="gridView">
<GridView.ItemTemplate>
<DataTemplate>
<Border Width="150" Height="150" BorderBrush="Pink" BorderThickness="10" Background="Aqua">
<TextBlock Foreground="Black" FontSize="20" Text="{Binding}"/>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<ItemsControl Grid.Row="1" x:Name="itemscontrol">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="150" Height="150" BorderBrush="Yellow" BorderThickness="10" Background="LightGreen">
<TextBlock Foreground="Black" FontSize="20" Text="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</Page>
Code for the codebehind (the .cs file that belongs to the XAML):
using System.Collections.Generic;
namespace App1
{
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
DataContext = this;
var items = new List<string> { "Iris", "Paul", "Ben", "Cate", "Daniel", "Ryan", "Iris 2", "Paul 2", "Ben 2", "Cate 2", "Daniel 2", "Ryan 2" };
gridView.ItemsSource = items;
itemscontrol.ItemsSource = items;
}
}
}
The result at a higher resolution, notice that the items keep their fixed size and don't scale to fit the screen.
Stretching the items height over one row with the GridView:
<GridView x:Name="gridView">
<GridView.ItemTemplate>
<DataTemplate>
<Border Width="150" BorderBrush="Pink" BorderThickness="10" Background="Aqua">
<TextBlock Foreground="Black" FontSize="20" Text="{Binding}"/>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
By the way, GridView inherits from the ItemsControl if you didn't know.

How to create tabs in windows phone 8

I'm a beginner on windows phone 8 developpement, and I need to create a tabs system ( a little like slidingDrawer on Android).
I explain myself, i've implemented a xaml interface which look like this :
http://img15.hostingpics.net/pics/974529onglet.png
The code of this interface :
<StackPanel VerticalAlignment="top" Orientation="Horizontal" Height="402" Width="480">
<StackPanel Width="161" Margin="0,10,0,0" >
<StackPanel Height="50" Background="DarkCyan">
<TextBlock Height="50" Text="Qualité orale" Foreground="White" />
</StackPanel>
<StackPanel Height="50" >
<TextBlock Text="Compréhension" Foreground="White" />
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Général" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Fichiers relatifs" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Le conférencier" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Questions" Foreground="White"/>
</StackPanel>
</StackPanel>
What i want to do here is that when the user touch a stackpanel, the stackpanel change his colour and the gray content at the right change too.
Can you help me solve my problem ?
Thank you in advance
Simply add Tap attributes to the TextBlocks and handle the events from the code behind.
For example:
<TextBlock Text="Questions"
Foreground="White"
Tap="MyEventHandler"
/>
Then you would want to give Name attributes to your StackPanels so that you can reference it in your code. Like so:
<StackPanel Height="50" Name="QuestionsStackPanel">
<TextBlock Text="Questions" Foreground="White"/>
</StackPanel>
In the code behind file, visual studio may auto generate the method stub, if not it should look like this.
private void MyEventHandler(object sender, System.Windows.Input.GestureEventArgs e)
{
//Make changes here
QuestionsStackPanel.Background = Colors.Blue
}
From here you can change the colors of the specific tabs and the grey area you mentioned.
First, Just for informations, the "android tabs interface" is not in agreement with the "UI (metro)" interface. It's not very very important, for more information about a "Ui design style you can go here for styling your app :d
For your Problem, in your Xaml, you can add an event for detect the click (or other event in your 'TextBlock'.
For sample, you can add a "Tap Event" in all your button in your "Code.xaml" (also, You can add a "Name" attribute for find easily your control after):
<StackPanel VerticalAlignment="top" Orientation="Horizontal" Height="402" Width="480">
<StackPanel Name ="Global_Onglets" Width="161" Margin="0,10,0,0" >
<StackPanel Height="50" Background="DarkCyan">
<TextBlock Height="50"
Text="Qualité orale"
Name="TextBlock_Quality"
Tap="MyPersonalEvent"
Foreground="White" />
</StackPanel>
<StackPanel Height="50" >
<TextBlock Text="Compréhension"
Name="TextBlock_Comprehension"
Tap="MyPersonalEvent"
Foreground="White" />
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Général"
Name="TextBlock_General"
Tap="MyPersonalEvent"
Foreground="White"/>
</StackPanel>
</StackPanel>
</StackPanel>
And, in your "code.cs", you create your event method :
/// <summary>
/// Event handler called by Textblock Tap.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void MyPersonalEvent(object sender, EventArgs e)
{
// Get, the current textblock where called the event.
TextBlock CurrentTextBlock = sender as TextBlock;
// Check just the clicked textBlock, for attributes specific colors..
foreach (TextBlock textblock in Global_Onglets.Children)
{
if (textblock == sender)
{
// Attribute secific color for this tap textblock;
}
// Attribute a "normal" color for alls others textBlock..
}
}
You can have more details about events here!!
Also, I saw You create your app in French. But, You can easy Localized your application for create here in other languages (and distrube in other country...) if you want you've a great tutorial here about "localizing your app"... Better think before, that any duty again later. :D

Binding Hyperlink to richtextblock in windows 8 Metro app

I am building a windows 8 metro app for fun/learning etc.
I have created a listview of text items that have descriptions, images etc. Inside the description, there are often hyperlinks that I would like to make clickable.
However, when binding to a textblock, xaml hyperlink code is displayed as text. Searching arround, it looks like I need to use a richtextblock for hyperlinks. I can't seem to figure out how to bind a hyperlink to it. I have found many examples from wpf showing how to extend the richtextblock using flowdocument. Flowdocument doesn't exist in the current consumer preview version of the framework.
I am reaching out to see if anyone has solved this issue or has any suggestions on what path to head down.
Edit:
Code I have Currently
right now I am just binding the "text" field from my Statuses Object to a textblock binding on "text"
I have URL's in the text field which I want to be able to make clickable.
As a test I was replacing the text field of the first object with hyperlink markup
ex.
feed_results[0].text = "<hyperlink .....
then trying to bind to texblock and richtextblock
Xaml
<ListView x:Name="ItemListView" ItemsSource="{Binding}" Background="Black" Width="372" VerticalAlignment="Top" Margin="50,0,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" MinHeight="100">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding user.profile_image_url}" Margin="0,0,15,0" VerticalAlignment="Top" />
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Left" Foreground="Gray" Text="{Binding user.name}" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="200" />
<TextBlock HorizontalAlignment="Left" Foreground="Gray" Text="{Binding text}" TextWrapping="Wrap" MaxWidth="200" />
</StackPanel>
</StackPanel>
<StackPanel Margin="0,15,0,0" HorizontalAlignment="Right">
<TextBlock Text="{Binding created_at, Converter={StaticResource StringConverter},ConverterParameter=Released: \{0:d\}}" HorizontalAlignment="Center" Foreground="Gray" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
Backend Code
FeedResult<Statuses> r2 = await feed.StatusesAsync(1, 50);
if (!r2.HasError)
{
feed_results = r2.Result;
Dispatcher.Invoke(Windows.UI.Core.CoreDispatcherPriority.High, new Windows.UI.Core.InvokedHandler((o, a) =>
{
ItemListView1.ItemsSource = feed_results;
}), this, null);
}
Microsoft removed support for inline hyperlinks from Metro XAML. You can still use HyperlinkButton for non inline hyperlinks, or if your inline hyperlinks short (1-2 words) then you could place HyperlinkButton inside of InlineUIContainer in RichTextBlock. Later solution would require some code, just using binding won't do it.