Binding from image array in XAML - 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

Related

XAML text and Binding in one Textblock

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.

Xamarin Forms Picker Item source binding in Xaml

I need to create states picker in my Xamarin Forms. I am using Xaml file for creating views.
Can any one help me to bind Picker in Xaml with item source?
The XLabs has an excellent example of a bindable picker that I have used in several projects to great affect:
https://github.com/XLabs/Xamarin-Forms-Labs
This will allow you to replicate the 'ItemsSource' functionality of the Listview.
You won't be able to do this in XAML, as you can see here.
You'll have to load the data up in the code behind, using either their regular API, or something like this.
You can also serialize your list as a JSON or preferred format, and deserialize that and pass it to the Picker.
This functionality did not previous exist, but it was recently added to the regular Xamarin.Forms Picker via the new ItemsSource and SelectedItem properties. It is currently in the pre-release NuGet package for version 2.3.4-pre1, but should be in the stable 2.3.4+ versions once it is released.
As JordanMazurke commented, XLabs has it.
Here is an example:
<ContentPage x:Class="XLabs.Samples.Pages.Controls.ExtendedPickerPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
Title="Picker">
<ContentPage.Content>
<StackLayout x:Name="myStackLayout">
<Label Text="Xaml:" />
<controls:ExtendedPicker x:Name="myPicker"
DisplayProperty="FirstName"
ItemsSource="{Binding MyDataList}"
SelectedItem="{Binding TheChosenOne}" />
</StackLayout>
</ContentPage.Content>

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.

Order of bindings in Windows Phone 8

I am facing this issue regarding data binding and binding in a converter while developing a Windows Phone 8 app.
I am trying to send the button to a converter so I can access all of its properties using the following code
<Button Content="{Binding OwnBoard, Mode=OneWay}" Grid.Row="0" Background="{Binding RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource BoardToBackConv}}" />
When I hit the break point in the converter I have the button as the binding object, but the Content property of the control is Null. I need to access the object stored in the Content property.
As far as I know, because of the order of the bindings, the Content property should already contain a value.
Any idea how to make this work?
I have managed to understand why what I want to do is not going to work.
Keeping it short, the converter is executed during the InitializeComponent() call, and at that time the other binding was not done, because there is not DataContext for the view yet.

Windows 8 bottom app bar

I've been trying to get an App bar implemented in a WinRT metro app (C# / XAML), but don't know where to begin. I've tried using the <ApplicationBar/> tag and I get a Type not found error.
There's no help online, could someone update this post with the answer so that it'll serve as a reference to other programmers as well?
There's only a JavaScript sample which isn't of much help.
This should work:
<AppBar
VerticalAlignment="Bottom">
<Button
AutomationProperties.Name="Play"
Style="{StaticResource PlayAppBarButtonStyle}"
Command="{Binding PlayCommand}" />
</AppBar>
– you would put that in the layout root grid of your page.
*EDIT
Note: According to documentation - you should put it in Page.BottomAppBar property, although at least in Windows 8 Consumer Preview - it works fine when used in any Grid, which is convenient if your UI isn't tightly coupled to a Page control.
*EDIT 2, response from MSFT:
The recommended approach is to use the Page.BottomAppBar/TopAppBar properties.
There are known hit-testing issues in the Consumer Preview if AppBars are added without using these properties
The AppBars do not use the proper animations if they are added without using these properties
If AppBars are added as children of arbitrary elements then it's easier for multiple controls to attempt to create/modify AppBars, resulting in an inconsistent user experience
*EDIT 3
The CustomAppBar in WinRT XAML Toolkit can be used anywhere, animates based on Vertical/Horizontal-Alignment, can have other content overlaid on top of it and also has a CanOpen property that allows to block it from opening.
<Page.TopAppBar>
<AppBar>
<TextBlock x:Name="TextBlock1" Text="Sample Text" Margin="0,0,0,0" Height="Auto" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</AppBar>
</Page.TopAppBar>