I have the following xaml code:
<dxb:BarButtonItem Name="btnPrev" Cursor="Hand" ItemClick="btnPrev_ItemClick">
<dxb:BarButtonItem.ContentTemplate>
<DataTemplate>
<Image x:Name="imgSkipLeft" Source="/ProjectTool;component/images/arrowleft.png" Height="16" Width="16">
<ToolTipService.ToolTip>
<TextBlock x:Name="txtBlockTip_Left"/>
</ToolTipService.ToolTip>
</Image>
</DataTemplate>
</dxb:BarButtonItem.ContentTemplate>
</dxb:BarButtonItem>
How can I find txtBlockTip_Left and modify the text
Rather that trying to find the TextBlock on the DataTemplate to change the text it would be better to set the text through a binding and then change the property that the Text property is bound to. The following resource has an example on how to use data binding within a DataTemplate: http://www.silverlight.net/learn/data-networking/binding/data-binding-to-controls-%28silverlight-quickstart%29
Using the VisualTreeHelperExtensions class and put a grid inside the data template and give it a name, in the example below the name is grdTemplate.
var bttn= btnPrev.ItemContainerGenerator.ContainerFromItem(btnPrev);
var dataTemplate = bttn.GetDescendantsOfType<Grid>().FirstOrDefault(g => g.Name == ("grdTemplate"));
var textBlocks= VisualTreeHelperExtensions.GetDescendantsOfType<TextBlock>(dataTemplate);
TextBlock txtBlockTip_left = textBlocks.ElementAt(0);
Related
Is it possible to display a list of ImageSources in XAML with Xamarin like you do with an List of Strings? In string you would do:
<ListView x:Name="newsList" ItemsSource="{Binding newsList}" ItemTapped="listView_ItemTapped" IsPullToRefreshEnabled="True" RefreshCommand="{Binding RefreshNewsCommand}" IsRefreshing="{Binding IsCurrentlyRefreshing}" />
However if you do this with an list of ImageSources it will not work.
Does anyone know an appropriate way to load this list of images into my few? Preferably so that i can load them next to the items of my NewsList?
Yes, you can define an "ItemTemplate" on the ListView (xaml / c#). There are 2 predefined ViewCells that you can assign to the ItemTemplate. One of them is "ImageCell". But ImageCell displays an Image + Text.
Also you might be interested in this:
https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/customizing-cell-appearance/
You will have to create a custom ViewCell.
Something like this (pseudo code):
ViewCell:
<ViewCell>
<ViewCell.View>
<Image Source="{Binding CoolImageSource}" />
</ViewCell.View>
</ViewCell>
//Your ListView, bring the namespace in, to reference your viewcell
//You can also define the item directly inside of the DataTemplate
//But keep your code clean and hold the viewcells separately
<ListView xmlns:vc=YourNameSpace.ViewCellsFolder>
<ListView.ItemTemplate>
<DataTemplate>
<vc:MyCoolViewCell />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
//And finally assign a List of such model:
public class ImageItem
{
public ImageSource CoolImageSource { get; set; }
}
I use WinRt MapControl on Windows Phone 8.1. But when I trying add MapIcon or MapPolyline map elements I get only text like this:
XAML code looks like this:
<maps:MapControl x:Name="MapOnScreenControl"
MapServiceToken="12345">
<maps:MapPolyline Path="{Binding Route, Converter={StaticResource RouteToGeopathConverter}}"/>
</maps:MapControl>
What I am doing is wrong? Thanks.
Unfortunately map elements cannot be added to the map via XAML. You will need to add them within code.
MapOnScreenControl.MapElements.Add(new MapPolyline());
A trick I like to do is use the viewmodel to add elements to the map by either setting a Map property or a MapElements property of my viewmodel.
private void MapPage_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
{
var vm = DataContext as MapViewModel;
vm.MapElements = MyMap.MapElements;
}
Then within the viewmodel you can add items to the elements.
You can also add a collection of items using the MapItemsControl.
<maps:MapControl x:Name="Map" MapServiceToken="abcdef-abcdefghijklmno">
<maps:MapItemsControl ItemsSource="{Binding Locations}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="Assets/Mappin.png" Height="25"
maps:MapControl.NormalizedAnchorPoint="1,0.5"
maps:MapControl.Location="{Binding Geopoint}" />
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:MapControl>
In the Universal Windows Platform API, how do I use x:Bind inside of a User Control (intended to be the layout for a GridView's ItemTemplate) to bind to instance properties of a GridView's ItemSource?
Background
I'm trying to re-create the layout found in Windows 10 stock apps like Sports, News, Money, etc.
I'm using a two GridViews for the main area of the app; one for "featured articles" (2 large photos w/ headlines) and one for all the other articles (smaller photos w/ headlines).
I'm able to bind to a data source that I supply in the code behind (a List where NewsItem is a POCO with a Image and Headline property) Here's the pertinent parts of the MainPage.xaml:
<Page ...
xmlns:data="using:NewsApp.Models" />
....
<GridView Name="FeaturedItems" Grid.Row="0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:NewsItem">
<Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
<Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind Headline}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
....
The Image and Headline bind just fine (even though they've not been styled correctly). However, instead I think I need to bind to a User Control to get the styling options I want, control over resizing esp. when using Visual State Triggers and to simplify the XAML in general (at least, this was the technique suggested to me.)
So, I added a new User Control to the project (FeaturedItemControl.xaml), and copied in the DataTemplate's child Grid:
<UserControl ... >
<Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
<Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind Headline}" />
</Grid>
</UserControl>
And then back in the MainPage.xaml, I change the DataTemplate to reference the new FeaturedItemControl:
<GridView Name="FeaturedItems" Grid.Row="0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:NewsItem">
<local:FeaturedItemControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
However, I get the error message for both Image and Headline properties: Invalid binding path 'Headline': Property 'Headline' can't be found on type 'FeaturedItemControl'.
I've tried a few things but am flailing just throwing code at the problem without understanding what I'm doing. Any help would be greatly appreciated.
Thank you for your kind attention.
Using Depechie's answer, I formulated this little cheat cheat for posterity:
Do note that you MUST use this technique to utilize the VisualStateManager with items inside your data bound controls' (GridView, ListView) data templates.
1) Create a User Control.
2) Cut the content of the DataTemplate in your page and paste it into the User Control replacing the template's Grid.
3) Reference the User Control from inside the Data Template:
4) Modify the contents of the User Control changing x:Bind statements to utilize object.property notation:
<UserControl>
<StackPanel>
<Image Source="{x:Bind NewsItem.LeadPhoto}" />
<TextBlock Text="{x:Bind NewsItem.Headline}" />
<TextBlock Text="{x:Bind NewsItem.Subhead}" />
</StackPanel>
</UserControl>
5) Add this in the User Control's Code Behind:
public Models.NewsItem NewsItem { get { return this.DataContext as Models.NewsItem; } }
public ContactTemplate()
{
this.InitializeComponent();
this.DataContextChanged += (s, e) => Bindings.Update();
}
Well it's possible to use x:Bind in user controls, but you'll need to add some extra code behind.
I encountered the same problem in my project, you can see the result here : https://github.com/AppCreativity/Kliva/tree/master/src/Kliva/Controls
So what you need to do is, create a property in the code behind of your user control that points to the correct DataContext.
If you do that, you can use properties of that DataContext in the xaml of your control: for example:
Do note that in the constructor of your control you do need to add: DataContextChanged += (sender, args) => this.Bindings.Update(); because the datacontext will change depending on the page where your control is used!
Then on the page where you are placing this control, you'll also need to do the same to enable the x:bind to work.
You'll see this in my example on the MainPage.DeviceFamily-Mobile.xaml and MainPage.xaml.cs files.
Hope this helps.
x:Bind isn't really hierarchical like Binding/DataContext is. Additionally when you're not directly inside a DataTemplate (such as inside your user control) the object that x:Bind tries to use is 'this' rather than 'this.DataContext'. My current line of thinking on how to solve this sort of issue is to try not to use UserControls anywhere. Instead preferring DataTemplates contained within a ResourceDictionary. There are some pretty strong caveats to this approach though, you will for example crash the xaml compiler if you use x:Bind inside a data template that was created from the ResourceDictionary item template (add new item). you can find a pretty complete example here https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBind its important to note in the sample where they show the ResourceDictionary being used that its not actually just a ResourceDictionary.xaml its also a ResourceDictionary.xaml.cs (this is where the generated code from x:Bind ends up)
Another option is to add Headline and Image as properties on your user control and x:Bind them from the template, then inside the user control x:Bind as you are currently doing, but now the x:Bind generated path 'this.Headline' will exist. Unfortunately the order things are actually bound means that the x:Bind's you have inside your user control will have to be OneWay rather than the default OneTime. this is because x:Bind OneTime does the bind inside the InitializeComponent call, and any set of properties/DataContext stuff doesn't get done until after that has already run.
So to sum this up, you have two options, use data templates everywhere, or bind to properties that are directly on the user control.
I work an a Windows 8 application which shows a GridView on one page. When ever the user selects an item of this grid and clicks on a button, the next page is loaded with detail information of the selected item.
I am using MVVM for this and have a DelegateCommand from Prims:
public DelegateCommand<Route> ShowRouteDetailsCommand { get; private set; }
This command is initialized inside the constructor:
this.ShowRouteDetailsCommand = new DelegateCommand<Route>(this.ShowRouteDetails);
The navigation is done by Prisms navigation service:
private void ShowRouteDetails(Route route)
{
this.NavigationService.Navigate(PageNames.RouteDetails, route.Id);
}
The routes are shown inside a GridView:
<GridView x:Name="RouteGrid"
ItemsSource="{Binding Routes}"
SelectionMode="Single">
<GridView.ItemTemplate>
<DataTemplate> ...
The command is currently added inside the app bar (just for testing):
<AppBarButton Command="{Binding ShowRouteDetailsCommand}"
CommandParameter="{Binding SelectedValue,
ElementName=RouteGrid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Icon="Forward" />
My problem is, that the parameter of ShowRouteDetails is allways empty. It doesn't even matter if I try GridViews SelectedValue or SelectedItem property.
I know that I could easily add a SelectedRoute property, bind the SelectedItem to it and use it in ShowRouteDetails but this seems dirty to me.
Why don't you just create a var in your viewModel and bind it to the SelectedItem of the gridView? In this way, when you run the command, you have only to read the value of that var.
<GridView x:Name="RouteGrid" ItemsSource="{Binding Routes}"
SelectionMode="Single" SelectedItem="{Binding myVar}">
<GridView.ItemTemplate>
<DataTemplate>
I am styling the ListPicker with a DataTemplate. All the examples I have read assume that the ListItems are bound complex objects and so can refer to properties on the objects using the usual Binding Property syntax. e.g.
this.myListPicker.Items.Add(new Profile() { Name = "Joe",
Occupation="Button pusher" });
and in the XAML,
<DataTemplate>
<StackPanel>
<TextBox Text="{Binding Name}" />
<TextBox Text="{Binding Occupation}" />
</StackPanel>
</DataTemplate>
However my ListPickers are bound to a List of simple strings and there does not seem to be a property on the string that actually refers to the string.
How do I get a handle to the string inside the DataTemplate so that I can assign them to a e.g. TextBox in the template?
In the example code you show, you do actually have a "complex" object, a Profile, and the binding you specify should work.
If you really just have strings as the items, then the binding in your ItemTemplate would look like:
<TextBox Text="{Binding }" />
The relevant detail is that all ItemsControls (and ListPicker seems to be one) set the DataContext of the view of each item to the item. The binding syntax, above, means "bind to the source itself", and, unless otherwise specified (like with Source or RelativeSource, etc.), the source of any binding is the DataContext.
MSDN has more details here.