XAML text and Binding in one Textblock - xaml

Is there a way to make a Texblock with a normal text and a Binding in the same Text Proberty?
It should look like this :
<TextBlock Text="Text {Binding SomeBinding}" />

Nope.
You should use a IValueConverter at this point.
If you don't know how to use an IValueConverter, the official tutorial by Microsoft will be helpful.

Related

Can a Binding value be created as a XAML Page resource?

Hi for rapid UI testing of Binding data at design-time in a UWP app, I was wondering if there was a way to create Binding values as resources in XAML. So instead of having to create a model, instantiate that model at design-time in Page.Resources, I just wanted to create essentially some constants I could use as Bindings.
Here are some examples of where I’d like the test bindings to work:
<TextBlock Text="{Binding title, ConverterParameter=lower, Converter={StaticResource StringFormatConverter}, Mode=TwoWay}" />
<TextBlock Text="{Binding title}" />
Given that scenario is there a way I could say define title as a named key with a string value that would work above?
Note that I am using Binding and not x:Bind since I want to use design-time data and I don’t want to have to rely on using the FallbackValue parameter.
Thanks for any ideas!
Rick
You can't bind to a static resource directly, but you can bind to a property of a static resource instead.
You can create a class implementing INotifyPropertyChanged which would have properties like Title. You would then create an instance of this class and store it as resource:
Application.Current.Resources[ "Data" ] = new MyDataClass();
Now you could use it in binding like this:
<TextBlock Text="{Binding Title, Source={StaticResource Data}}" />

Multi binding in UWP

I want to display a textblock with latitude and longditude. In my model, the lat and lng are two variables, so I need to combine them, preferably with stringformat as this answer suggests. Unfortunately it doesn't seem like multi binding is supported in UWP applications.
That leaves me with a couple of options.
Create two text blocks that are bound to each variable and align them next to each other. I'm not sure if i need two extra textblocks to be able to display "lat" and "lng" in front of the values. And then an third label displaying "Position" in front of that again. This answer states that there is no stringformat property for Binding. A total of five textblocks is too much in my opinion.
<RelativePanel>
<TextBlock x:Name="EquipmentLatTextBox"
Text="{Binding Equipment.lat}"/>
<TextBlock x:Name="EquipmentLngTextBox"
Text="{Binding Equipment.lng}"
RelativePanel.RightOf="EquipmentLatTextBox"/>
</RelativePanel>
Create a value converter.
This also seems very unnecessary. I get the point of using converters to convert across data-types, but for concatinating strings there should be a buildt in property.
Create a property in the view model that returns a string of the values as it should be displayed. This seems like the best option as the method is not in the model, but i still think that i should be able to do this in the xaml markup.
Is there a better way to do this?
This can be solved by using runs. It's actually a lot easier to achieve this in UWP than with multi-binding in WPF. A TextBlock item can consist of several "runs" of text which can bind to different properties. The runs will behave like inline elements. Each run can have text directly between the tags, or as a text property. Each run-element can also have independent styling.
Documentation for the TextBlock class
For the example i provided in my question, i ended up formating it like this
<TextBlock x:Name="LocationTextBlock">
<Run FontWeight="Bold">Location: </Run>
<LineBreak />
<Run>Lat: </Run>
<Run Text="{x:Bind ViewModel.Equipment.Lat}"></Run>
<Run> Lng: </Run>
<Run Text="{x:Bind ViewModel.Equipment.Lng}"></Run>
</TextBlock>
The result looks like this
Location:
Lat: 00.000 Lng: 00.000
No, the Universal Windows Platform currently doesn't support multi binding. The best solution for you is indeed creating a dedicated property in the view model or alternatively using the two TextBox controls. As compared to WPF the binding syntax in UWP is more limited to ensure the best performance possible.
You could also consider using the x:Bind syntax to ensure strongly-typed and optimized bindings, which were introduced with UWP.

UWP X:Bind and Design Time Data

is it possible to use x:bind and design time data in uwp apps?
e.g if I had a textbox that used x:bind to bind to a property on viewmodel in the code behind, should that property's value appear in the textbox in the designer?
is there a way of achieving this?
cheers
Johnny
x:Bind doesn't support design-time data yet. Maybe it never will given it's designed for compile-time bindings to boost performance (I wish it would though).
For simple UI testing purposes, I would add a FallbackValue to the binding expression to force the designer to show me some dummy text. However, don't forget to remove it once you are done with the design.
<TextBlock Text="{x:Bind MyMoney, FallbackValue='$10,000,000'}" />
Update
Now it's easier with the new design-time data support.
<TextBlock Text="{x:Bind MyMoney}" d:Text="$10,000,000" />
Read more from here.

What's the DataContext of the Header elements inside a Hub control?

I have started to develop for WP 8.1 using Windows Runtime recently, and I have faced a... "problem" that I don't seem to understand.
The application I am currently developing uses a Hub control, and I would like to tweak its header's appearance slightly. To do so, I changed the HeaderTemplateattribute of the Hub control. However, as I tried to localize the textual content of the header (note that this is WinRT, the localization process is slightly different from the process in WP8 and can be found here), I "accidentally" fixed the problem by making the template like this:
<Hub.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="Red"/>
</DataTemplate>
</Hub.HeaderTemplate>
I don't understand why it worked, though. When you do data binding like this (just using the expression {Binding}), doesn't the element get the same DataContext as its father? What's happening under the hood? Who's the parent element of the TextBlock, after all?
Thanks in advance.
EDIT
As igrali asked, here is a more complete view of the XAML:
<Page ...
DataContext="{Binding Data, RelativeSource={RelativeSource Self}}">
<Grid Background="#FFF6DB">
<Hub Name="MainPageHub"
x:Uid="MainPageHub"
Margin="0,27,0,0">
<Hub.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="White"/>
</DataTemplate>
</Hub.HeaderTemplate>
...
Then, in the /Strings/en-US/Resources.resx, I have a "MainPageHub.Header" property set to "foobar" (just an example), and what I get as a header is actually "foobar" (which is what I wanted, but even so it seems confusing!).
As Tim Heuer explains it here
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. This applies to properties
other than text (i.e. width) as well as attached properties.
All I can add is - notice the x:Uid. It's MainPageHub. In the localized resource file, you have a MainPageHub.Header. This means that the value of the resource string will be set to the Header of the control which has the x:Uid set to MainPageHub.
So, now that it's clear how the Header is set - there's still the binding part. Well, considering you have a different template for the Header, it needs to do the {Binding } part to actually get the value of the header which is set through the resources.

Binding from image array in XAML

In XAML I'v got
<Image x:Name="optionImage1" Source="{Binding OptionsImage}"/>
OptionsImage is returning ImageSource[] -array.
How can I bind to specific point of array, ie {Binding OptionsImage=[1]}
As you can see from the question I'm total new on XAML and "answers for dummies" are appreciated!
I assume you are using WPF or Silverlight.
You are nearly there. Use this syntax.
<Image x:Name="optionImage1" Source="{Binding OptionsImage[1]}"/>
See also this question: Binding in WPF to element of array specified by property