Formatting text with RichtTextBlock - xaml

Small question, anyone have a small example on different data formatting tips when using a RichTextBlock control in Windows8 - XAML?
Currently I'm MVVM binding the Paragraph element of the RichTextBlock to a large text property on my MVVM.
But I was wondering, how can I indicate where to add Line break, setting titles, etc...?
Anyone any good tips on doing this?

I never worked with the RichTextBlock before but there's an interesting topic on the MSDN forum: http://social.msdn.microsoft.com/Forums/en-US/winappswithnativecode/thread/d215abeb-7acd-41c1-81ba-c73a0ab68785 where an MSFT employee explains you should use the Blocks property.
Now, the Blocks property is of type BlockCollection, meaning it can hold any type of block. In your ViewModel you could fill the property with an HTML string (containing your text with headers, paragraphs, ...). Then you should consider creating an attached behavior that reads the HTML and creates the required blocks (like Windows.UI.Xaml.Documents.Paragraph) to finally fill up the Blocks property.
Take a look at the following guide to create attached behaviors: http://dotnet.dzone.com/articles/dragflickbehavior-windows
<RichTextBlock ...>
<MyBehaviors:Interaction.Behaviors>
<MyBehaviors:RichTextBehavior HtmlText="{Binding ...}"/>
</MyBehaviors:Interaction.Behaviors>
</RichTextBlock>

Related

What's a comprehensive list of parts of an ItemsControl?

The UWP XAML ItemsControl is the basis for many complicated XAML classes, like ListView and GridView.
The documentation Item containers and templates describes 2 key parts of these controls:
Data template
Control template
These parts combine to create the final view:
Container controls (such as ListViewItem and GridViewItem) consist of two important parts that combine to create the final visuals shown for an item: the data template and the control template.
In practice, developers specify the data template by specifying a DataTemplate in ListView.ItemTemplate (or GridView.), and they can customize the control template by providing a Style (TargetType="ListViewItem") to ListView.ItemContainerStyle.
Developers can also customize the ListView.ItemsPanel (which is an ItemsStackPanel by default), and the default Template for the ListView.ItemContainerStyle contains a ListViewItemPresenter. The documentation for Item containers and templates mentions these, too.
That raises the question:
When I add a ListView (or GridView or any ItemsControl) to my code, what am I actually adding? What can I customize? How is my data displayed?
As far as I can determine, the ListView looks something like:
ListView
Renders its Template which somehow renders:
ItemsPanel
Renders its ItemsPanelTemplate which is:
ItemsStackPanel
Renders, for each item:
ListViewItem
Renders its Template, which is:
ListViewItemPresenter
Somehow renders:
ListView.ItemTemplate
But this is unclear to me.
Disclaimer: I work for Microsoft.
you can customize anything in xaml
under the hood, both ListView and GridView can be created by ItemsControl, but their default template have some customization built-in already.
if you want to understand when to use which, here is a page:
https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/lists
your data will be set to the ItemsSource if using binding, for example
<ListView
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
>...
or you can set directly.
from your question, it sounds like you may not have understood the basis, so maybe reading this series will help you:
http://drwpf.com/blog/itemscontrol-a-to-z/
it's for wpf, but the fundamental is the same, you can apply it to UWP as well.

How to get rid of the Borders of a ContentDialog?

I can not display a ContentDialog without Borders. If I set BorderBrush="Transparent" or BorderThickness="0 0 0 0" the Borders remain.
Is there any way to get rid of them?
When ContentDialog displays, the properties of BorderBrush and BorderThickness are invisible. To create a border you need to specify custom content that has a border. This post can be helpful.
Besides, there are several other ways to do so:
1) As blueeyes said: You can take some trouble to modify the default ControlTemplate. Here you can find explanations of ContentDialog's style and template
2) You can create an customized user dialog derived from ContentDialog, where you can define your own style. MSDN has a simple example.
Maybe you can work with the ControlTemplateof it there you can change the whole style of it but I warn you just edit a copy of it and it will be a lot of work to do.
Hope my answer helps you :)
There is a tricks which works for me : when you define your ContentDialog (maybe in the code behind), you can override this resource :
Application.Current.Resources["ContentDialogBorderWidth"] = new Thickness(0);
I fund this resource on the style page of ContentDialog of Microsoft here

Localize x:String

I saw such questions on MSDN, but they were not answered. So I can localize all my controls using x:Uid and specific key format in *.resw file. But how do I localize x:String? For example this:
<x:String x:Key="AppName">My App</x:String>
I know some workarounds. But are there any nice approaches?
Looks like it is impossible now. Should use x:String only for strings that are not supposed to be localized (e.g. App Name). Otherwise, using TextBlock or some other text controls is preferred
There is an msdn post on doing that here. The essence of it is something like this:
<TextBlock x:Uid="MyTextBlock" FontSize="24.667" Text="Design Placeholder" />
Notice the x:Uid value here. This now maps back to the key in your
RESW file. Anything with that starting key will have properties
merged into it. So we can have a key in our RESW for “Text” using the
key name MyTextBlock.Text with a value of “Hello World” and the
runtime will do the replacement for you.
Steps:
Create a textblock with the x:Uid property defined.
Create a RESW file for your language appropriately named for your localization
Add strings to your RESW to replace the property in your textblock

Dojo and Dijit reference for all properties

I was experimenting with Dojo and Dijit in the past days and I find it quite interesting. I was however trying to find a reference or an API doc that helps me understand all the properties I can assign to widgets and containers.
For example a Tab with a Save Icon will be like this:
<div data-dojo-type="dijit.layout.ContentPane" title="Group Two" data-dojo-props="iconClass: 'dijitEditorIcon dijitEditorIconSave'">
Now, where can I find what to put in the "data-dojo-props" property? Where can I find for example all the list of icons?
My main question would be for example on how to create a vertical menubar, but beyond odd examples scattered here and there, the api reference is not much helpful...
Any help? Am I missing something here?
For this kind of situation, the trick is learning how to convert between the programmatic Javascript style and the declarative HTML style (and sometimes also between the old declarative style, without data).
For the new declarative style, basically the only "real" argument now is data-dojo-props and it consists of an object that will be passed to the widget constructor.
//programatic style
new dijit.myWidget({foo:'a', bar:'b'});
//declarative style
<div data-dojo-type="dijit.myWidget" data-dojo-props="foo:'a', bar:'b'"></div>
You can find what properties an widget accepts by checking the corresponding widget documentation and looking for either declarative or programmatic examples (now that we know how to convert between them). If that is not enough, you can also check the source code - it is usually very well commented and is where api.dojotoolkit.org gets its data from anyway.

XAML tag list reference

As the question suggests I'm simply looking for a XAML tag list reference. I've banged the obvious queries in Google/SO but not found what I am looking for yet. Any useful links welcome.
There's a WPF Binding Cheatsheet and another XAML for WPF Cheatsheet which might help, but really the "tags" in XAML are just the properties of the classes.
There isn't such a thing as a xaml tag list.
XAML is just a declarative way to instantiate .Net classes. Class names are elements in XAML and properties on the class are attributes or attribute elements using dot notation.
Tags in XAML only mirror the types in one or more assemblies that are bound to a particular XAML namespace.
There are however a specific set of elements that are specific to XAML in itself and are not related to any particular .Net assembly, those are usually in the x: namespace, more info here: XAML Namespace (x:).
There is no such thing as the XAML tag list since XAML is an open system.
There are, however, standard vocabularies. Rob Relyea's Blog is a good place to keep track of the standardization around these vocabluaries. For example, this is an entry for the Silverlight XAML vocabulary.
With WPF the XAML elements map to the classes like StackPanel. MSDN seems to give XAML examples for many of the controls.
There are XAML-specific conventions about representing things like complex properties and bindings. However, there is no definitive list of XAML tags. XAML tags are actually mapped to WPF objects. For example, <Button> is just a XAML representation of the System.Windows.Controls.Button class and the attributes allowed on the <Button> tag are the public properties of the Button class.
There should be several WPF cheatsheets available soon on http://www.devsheets.com (since around September 2011) ... You can download it there, and also buy printed versions with more detailed information on them (not all content fits in publicly available pdf, because pdf would not be readable if printed on paper without high quality print ... that is why we also decided to sell high quality laminated cheatsheet prints in addition to their free versions)