We Keep Coding

How to bind images to a list where the grid that is nesting the images has a different bindingcontext?

I am currently working with a list that i bind through my viewmodel and then a service.
In the list i bind an image and a label. I can successfully get the label binded, but the image does not show. The reason for this seems to be because i change the bindingcontext in the grid where the image is nested inside. I change the bindingcontext in order to get an accurate width for the image.
If i move the image outside the grid, then it shows, so now i am trying to get the bindingcontext in order again.
What i tried to do with the image was to add a new bindingcontext
BindingContext="{x:Reference Name=gridFollowers}" Source="{Binding image}"
where gridFollowers is what i name my stacklayout where the original binding is made, but unfortunately the image still does not show.
here is the full code:
<StackLayout x:Name="gridFollowers"
BindableLayout.ItemsSource="{Binding headerService.CurrentHeader}">
<BindableLayout.ItemTemplate >
<DataTemplate>
<Grid WidthRequest="75">
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="7.5*" />
</Grid.ColumnDefinitions>
<Grid
Grid.Row="0"
Grid.Column="0"
BindingContext="{x:Reference Name=headerImage}"
WidthRequest="{Binding Height}">
<ffimageloading:CachedImage
x:Name="headerImage" BindingContext="{x:Reference Name=gridFollowers}"
Source="{Binding image}" />
</Grid>
<Label Grid.Row="1" Grid.Column="0"
Text="{Binding firstname}" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
How can i make it so the image shows?

I try your code and modify some code as following, please replace your code.
<Grid
Grid.Row="0"
Grid.Column="0"
WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
<ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
</Grid>
Update:
please check headerService.CurrentHeader data.
Please check if binding viewmodel to page.cs bindingcontext by code behind.
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="7.5*" />
</Grid.ColumnDefinitions>
<Grid
Grid.Row="0"
Grid.Column="0"
WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
<ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
</Grid>
<Label
Grid.Row="1"
Grid.Column="0"
Text="{Binding firstname}" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
public partial class Page8 : ContentPage
{
public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
InitializeComponent ();
models = new ObservableCollection<imagemodel>()
{
new imagemodel(){firstname="first image", image="a1.jpg"},
new imagemodel(){firstname="second image",image="a2.jpg"}
};
this.BindingContext = this;
}
}
public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

How to set Listview Itemtemplate when drag drop in wpf

I have create simple drag drop in WPF. In my application there are two Listviews. I have to drag list items from first listview and drop the item to second listview. I have created custom data template for first listview. When i drag the first listview item into second listview the data template is not customized so items are not displayed. How to display the list items with generic. Please help. My Code is as below,
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ListBox
Name="memberCollection"
Grid.Column="1"
Width="150"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
PreviewMouseLeftButtonDown="memberCollection_PreviewMouseLeftButtonDown">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBox Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Grid
Name="gridDrop"
Grid.Column="0"
Margin="20,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ListBox.Drop="grid_Drop"
ShowGridLines="True">
<ListBox
Grid.Row="0"
Grid.Column="0"
Margin="10,10,0,0"
AllowDrop="True" />
</Grid>
</Grid>
Code Behind
ObservableCollection<Member> member = new ObservableCollection<Member>();
public MainWindow()
{
InitializeComponent();
member.Add(new Member { Name = "Karthick", ID = "20011", Address = "10, MainRoad, Chennai" });
memberCollection.ItemsSource = member;
DataContext = new Member();
}
private void memberCollection_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
object selectedMember = memberCollection.SelectedItem as Member;
if (selectedMember != null)
DragDrop.DoDragDrop(memberCollection, selectedMember, DragDropEffects.All);
}
private void grid_Drop(object sender, RoutedEventArgs e)
{
ListBox listContent = e.Source as ListBox;
if (listContent != null)
Console.WriteLine("", Grid.GetColumn(listContent), Grid.GetRow(listContent));
DataObject item = (((DragEventArgs)e).Data) as DataObject;
object Target = ((Grid)(sender)).DataContext;
object listItem = item.GetData(Target.GetType());
if (listItem != null)
{
//listContent.Items.Add(listItem.Name.ToString());
//listContent.Items.Add(listItem.ID.ToString());
//listContent.Items.Add(listItem.Address.ToString());
//listContent.ItemTemplate = memberCollection.ItemTemplate;
listContent.Items.Add(listItem);
}
}

If you define the DataTemplate as a reusable resource, you can use it in both ListBoxes:
<Grid Margin="0,20,0,0">
<Grid.Resources>
<DataTemplate x:Key="dataTemplate">
<StackPanel>
<TextBox Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ListBox
Name="memberCollection"
Grid.Column="1"
Width="150"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
PreviewMouseLeftButtonDown="memberCollection_PreviewMouseLeftButtonDown"
ItemTemplate="{StaticResource dataTemplate}" />
<Grid
Name="gridDrop"
Grid.Column="0"
Margin="20,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ListBox.Drop="grid_Drop"
ShowGridLines="True">
<ListBox
Grid.Row="0"
Grid.Column="0"
Margin="10,10,0,0"
AllowDrop="True"
ItemTemplate="{StaticResource dataTemplate}"/>
</Grid>
</Grid>
If you want to display some other properties of the dropped Member in the second ListBox, you should define another ItemTemplate:
<ListBox
Grid.Row="0"
Grid.Column="0"
Margin="10,10,0,0"
AllowDrop="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Id}" />
<TextBlock Tag="{Binding Address}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Windows phone 8 -> problems with adding data binding , listbox

My problem is that my items won't add to the list. I try to add 3 texts and one image location to the list. I try everything but I couldn't do it.
XAML code
<ListBox Name="mylistbox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Grid.RowSpan="3">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="s1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="100"/>
<RowDefinition Height="30"/>
<RowDefinition Height="20/"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding naslov}" Tag="{Binding broj}" FontSize="32" Foreground="White" HorizontalAlignment="Center" TextWrapping="Wrap" Grid.Row="1" Grid.Column="2" />
<TextBlock Text="{Binding datum}" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Row="2" Grid.Column="2"/>
<Image Source="{Binding slika}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
C# code
for (int i = 1; i < datum.Count; ++i)
{
podatak _podatak = new podatak();
_podatak.naslov = naslovi[i];
_podatak.datum = datum[i];
_podatak.broj = Convert.ToString(broj);
_podatak.slika = "http://hsin.hr/images/logo.gif";
mylistbox.Items.Add(_podatak);
}

I didn't test, but I think you are missing one detail, and doing a little mistake.
First: you need to bind a List to a ListBox. So, I believe you should do something like this:
List<podatak> myList = new List<podatak>();
for (int i = 1; i < datum.Count; ++i)
{
podatak _podatak = new podatak();
_podatak.naslov = naslovi[i];
_podatak.datum = datum[i];
_podatak.broj = Convert.ToString(broj);
_podatak.slika = "http://hsin.hr/images/logo.gif";
myList.Add(_podatak);
}
mylistbox.ItemsSource = myList;
And Second: add this on xaml:
<ListBox Name="mylistbox" ItemsSource="{Binding}" ...
Correcting:
As commented, doesn't need change anything on your XAML code.
My mistake.

How to add ListView with datatemplate to Button Flyout in windows store app 8.1 c#

I have a requirement like when I click on Button Flyout should come with the list of dynamic data and specified template. Below is the code in Xaml. But the Flyout is not Loading with any data.
<Button Content="Folders" >
<FlyoutBase.AttachedFlyout>
<Flyout >
<ListView x:Name="lstEmailFolder" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Image Source="/Images/Favorite_icon.png" Height="30" Width="30" Grid.Column="1" />
<TextBlock Text="{StaticResource Foldername}" Width="30" Height="30" Foreground="White" FontSize="20"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Button>

You havent bind Itemsource property to Listview and instead of Text="{StaticResource Foldername}" use Text="{Binding Foldername}"
xaml
<Button Content="Display Flyout">
<Button.Flyout>
<Flyout>
<ListView x:Name="lstEmailFolder" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Foldername}" Width="30" Height="30" Foreground="White" FontSize="20"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</Button.Flyout>
</Button>
c#
this.InitializeComponent();
List<FlyoutData> data = new List<FlyoutData>();
data.Add(new FlyoutData("Folder1"));
data.Add(new FlyoutData("Folder2"));
lstEmailFolder.ItemsSource = data;
public class FlyoutData
{
public string Foldername { get; set; }
public FlyoutData(string Foldername)
{
this.Foldername = Foldername;
}
}

wpf autocompletebox binding

I've created some UserControls which are wrapping some standard controls, for example: a textbox/combobox + Image + textblock. I'm trying to do the same thing with AutoCompleteBox and have failed so far...
The list of items is shown fine, I can select na item, but that doesn't trigger a change to the SelectedItem. I'm using almost the same code for combobox so not sure what's wrong...
Anyway I've played around with ValueMemberPath / ValueMemberBinding on the AutoCompleteBox but not sure if that's the way to go.
The UserControl xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="0,0,2,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ElementName=ACProperty, Path=ImageSource}" VerticalAlignment="Center"
MaxHeight="30" MaxWidth="30" Margin="1" Grid.Column="0" RenderOptions.BitmapScalingMode="HighQuality"/>
<TextBlock Text="{Binding ElementName=ACProperty, Path=Label}" VerticalAlignment="Center"
HorizontalAlignment="Left" Grid.Column="1" Margin="1" TextWrapping="Wrap" Width="100" />
</Grid>
<toolkitInput:AutoCompleteBox FilterMode="ContainsOrdinal" IsTextCompletionEnabled="True"
ItemsSource="{Binding ElementName=ACProperty, Path=ItemsSource}"
SelectedItem="{Binding ElementName=ACProperty, Path=SelectedItem}"
MinimumPrefixLength="2"
MinimumPopulateDelay="300"
VerticalAlignment="Center"
HorizontalAlignment="Stretch" Grid.Column="1" Margin="1,1,2,1" />
</Grid>
The code behind:
public static DependencyProperty LabelProperty = DependencyProperty.Register(
"Label", typeof(string), typeof(AutoCompleteProperty));
public static readonly DependencyProperty ItemsSourceProperty =
DependencyProperty.Register("ItemsSource", typeof(object), typeof(AutoCompleteProperty));
public static readonly DependencyProperty SelectedItemProperty =
DependencyProperty.Register("SelectedItem", typeof(object), typeof(AutoCompleteProperty),
new FrameworkPropertyMetadata() { BindsTwoWayByDefault = true });
public static DependencyProperty ImageSourceProperty = DependencyProperty.Register(
"ImageSource", typeof(string), typeof(AutoCompleteProperty));
public object ItemsSource
{
get
{
return (object)GetValue(ItemsSourceProperty);
}
set
{
SetValue(ItemsSourceProperty, value);
}
}
public object SelectedItem
{
get
{
return (object)GetValue(SelectedItemProperty);
}
set
{
SetValue(SelectedItemProperty, value);
}
}
public string Label
{
get
{
return (string)GetValue(LabelProperty);
}
set
{
SetValue(LabelProperty, value);
}
}
public string ImageSource
{
get
{
return (string)GetValue(ImageSourceProperty);
}
set
{
SetValue(ImageSourceProperty, value);
}
}
And in a UserControl/Window where I would like to use it:
<cont:AutoCompleteProperty Label="Product Category"
ItemsSource="{Binding Path=ProductCategories}"
SelectedItem="{Binding Path=ProductCategory}"
ImageSource="..."/>

I have updated binding in the following code....
<UserControl x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="350" Width="525"
xmlns:toolkitInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
x:Name="root"
>
<Grid>![enter image description here][1]
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="0,0,2,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ImageSource,ElementName=root}" VerticalAlignment="Center" MaxWidth="100" Margin="1" Grid.Column="0" RenderOptions.BitmapScalingMode="HighQuality"/>
<TextBlock Text="{Binding Label,ElementName=root}" DataContext="{Binding RelativeSource={RelativeSource Self}}" VerticalAlignment="Center"
HorizontalAlignment="Left" Grid.Column="1" Margin="1" TextWrapping="Wrap" Width="100" />
</Grid>
<toolkitInput:AutoCompleteBox FilterMode="ContainsOrdinal" IsTextCompletionEnabled="True"
ItemsSource="{Binding ItemsSource,ElementName=root}"
SelectedItem="{Binding SelectedItem,ElementName=root}"
MinimumPrefixLength="2"
MinimumPopulateDelay="300"
VerticalAlignment="Center"
HorizontalAlignment="Stretch" Grid.Column="1" Margin="1,1,2,1" />
</Grid>
</UserControl>
Here is a image of the window using the above code

I made few changes in your bindings.
Observe usercontrol DataContext.
<UserControl x:Class="WpfApplication1.AutoCompleteProperty"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:toolkitInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
d:DesignHeight="300" d:DesignWidth="300" DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="0,0,2,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ImageSource}" VerticalAlignment="Center" MaxWidth="100" Margin="1" Grid.Column="0" RenderOptions.BitmapScalingMode="HighQuality"/>
<TextBlock Text="{Binding Label}" VerticalAlignment="Center"
HorizontalAlignment="Left" Grid.Column="1" Margin="1" TextWrapping="Wrap" Width="100" />
</Grid>
<toolkitInput:AutoCompleteBox FilterMode="ContainsOrdinal" IsTextCompletionEnabled="True"
ItemsSource="{Binding ItemsSource}"
SelectedItem="{Binding SelectedItem}"
MinimumPrefixLength="2"
MinimumPopulateDelay="300"
VerticalAlignment="Center"
HorizontalAlignment="Stretch" Grid.Column="1" Margin="1,1,2,1" />
</Grid>
</UserControl>
and no changes in code behind file