In XAML how would you have in a list or grid on the left side a combo box and the right side multiple check boxes in a straight line?
Let say I had a data structure like.
sudo:
// for combo
class Option
{
int key {get;set;}
string value{get;set;}
}
// for checkboxes
class Selection
{
int key {get;set;}
string value{get;set;}
bool isSelected {get;set;}
}
class Item
{
Item
{
selections = new List<Selection>();
Options = new List<Option>();
}
List<Selection> selections {get;set;}
List<Option> Options{get;set;}
}
Now this would be the item source.
List<Item> x = new List<Item>();
Item i = new Item();
i.Selections.add(blah); 25 selections
i.Options.add(blah); 3 checkboxes
x.add(i) 50 combination's.
control.itemsource = x;
What would the XAML look like. I am stuck as I quite dont get it.
Thanks...
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemTemplate>
<DataTemplate>
<!-- This is your combobox -->
<DockPanel HorizontalAlignment="Stretch" LastChildFill="False">
<ComboBox ItemsSource="{Binding Options}" DockPanel.Dock="Left">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding value}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!-- This is your line of checkboxes -->
<ListBox ItemsSource="{Binding Selections}" DockPanel.Dock="Right">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding isSelected}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
I have a listbox like this:
<ListBox x:Name="list1" ItemsSource="{Binding MyListWithTuples}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding value1}" />
<Label Content="{Binding value2}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In my view model I have this collection:
private ObservableCollection<(decimal value1, decimal value2)> _myCollection= new ObservableCollection<(decimal value1, decimal value2)>();
public ObservableCollection<(decimal vaule1, decimal value2)> MyCollection
{
get { return _myCollection; }
set
{
_myCollection= value;
base.RaisePropertyChangedEvent("MyCollection");
}
}
But the data isn't show. However if I convert the tuple to a dictionary, I can bind to Key and Value properties and the data is shown. But I would like to avoid to convert the tuple into a dictionary.
Are there some way to bind the listbox to a list of tuples?
Thanks.
Unlike the Tuple Class, the new C# tuple types only define fields, but no properties. So you can't use them with WPF data binding.
However, with
public ObservableCollection<Tuple<decimal, decimal>> MyCollection { get; }
you could use this XAML:
<ListBox ItemsSource="{Binding MyCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Item1}" />
<Label Content="{Binding Item2}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I would like to add different images next to each item in a combobox itemssource. Here's what i have at the moment.
<ComboBox x:Name="cmb" HorizontalAlignment="Left" Width="135" Height="22"
SelectedItem="{Binding myViewMode}" Margin="5,0,0,0">
<ComboBox.ItemsSource>
<x:Array Type="sys:String" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:String>Oranges</sys:String>
<sys:String>Mangoes</sys:String>
</x:Array>
</ComboBox.ItemsSource>
</ComboBox>
How should add the two diffent images using an itemtemplate. Thanks
Edit One
This is what i have tried with itemtemplate
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding OrangesImage}" Height="100"/>
<Image Source="{Binding MangoesImage}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
It's here that am really stuck.
At the moment your item template contains only two images, so you will show two images and no text for each item!
I would suggest you change your ItemsSource to code behind so you can have text and image properties.
First make a simple Fruit class:
public class Fruit
{
public string FruitName { get; set; }
public string FruitImage { get; set; }
}
Then create a list of these fruits and set the ItemsSource of your combo box to this list:
var fruits = new List<Fruit>();
fruits.Add(new Fruit() { FruitName = "Mangos", FruitImage = #"C:\mangoimage.jpg" });
fruits.Add(new Fruit() { FruitName = "Oranges", FruitImage = #"C:\mangoimage.jpg" });
cmb.ItemsSource = fruits;
Then simplify your XAML thus:
<ComboBox x:Name="cmb" HorizontalAlignment="Left" Width="135" Height="22" SelectedItem="{Binding myViewMode}" Margin="5,0,0,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FruitName}"/>
<Image Source="{Binding FruitImage}" Height="100"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
In your ItemSource your image should consists as Uri path with BitMapImage Class then only Images are accepted in ItemTemplate in ComboBox
Xaml Code
<ComboBox x:Name="cmb" HorizontalAlignment="Left" Width="135" Height="22"
SelectedItem="{Binding myViewMode}" Margin="5,0,0,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="25" Height="25" Source="{Binding FruitName}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Your Model Class
public class Fruit
{
public string FruitName { get; set; }
}
Your ItemSource should Consists as:
fruitCollection.Add(new Fruit() {FruitName= new BitmapImage(new Uri("C:\mangoimage.jpg", UriKind.Relative))});
I have a viewmodel called Calendar.
in Calendar there is a list of CalendarDaySquare objects. They are displayed in a ItemsControl that is a uniformgrid (from the ItemsPanelTemplate).
On each of these calendarDaySquares I want to populate it with the Events Collection (of CalEvent objects)
public Class Calendar
{
// this is just a list that inherits from List<T>
public CalendarSquareList<CalendarDaySquare> Squares { get; private set; }
}
public class CalendarDaySquare
{
public List<CalEvent> Events {get; private set;}
public ObservableCollection<string> ObsColEvents{get; private set;}
}
Are the same thing, I just tried using the ObservableCollection b/c I've been stumped on this.
Here is my xaml :
<ItemsControl ItemsSource="{Binding Squares}"
Margin="0,0,0,263">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="7" Rows="5"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Control.Margin" Value="1"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding}" Margin="5">
<ListBox.ItemTemplate>
<DataTemplate xmlns:local="clr-namespace:BudgetCalendarWPF.ViewModel;assembly=BudgetCalendarWPF" DataType="CalendarDaySquare">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!--</Button>
</ControlTemplate>
</Button.Template>
</Button>-->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I hope i've pasted the latest (i've been working on this all day so this is just what i've got in VS currently .. sad face )
Welp, I think i've got this kinda figured out but I'd love any suggestions.
I was trying to hard. I didn't realize it would automatically pick up the item as the type it was. so this worked :
<ListBox ItemsSource="{Binding Events}">
<ListBox.ItemTemplate>
<DataTemplate >
<Button HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Name}"/>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I have an observablecollection of Images that get populated via the following code:
<StackPanel Orientation="Horizontal" Grid.Column="0">
<ListBox ItemsSource="{Binding BigImageView}" IsSynchronizedWithCurrentItem="True"
SelectedIndex="0" SelectedItem="{Binding CurrentItem}" />
</StackPanel>
<ContentControl Name="Detail" Content="{Binding BigImageView, Mode=OneWay}"
Margin="9,0,0,0" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Top"/>
However the Content Control is supposed to bind to the BigImageView via an ObservableCollection
BigImage = new ObservableCollection<Image>();
_listView = CollectionViewSource.GetDefaultView(BigImage);
_listView.CurrentChanged += new EventHandler(OnCurrentChanged);
public System.ComponentModel.ICollectionView BigImageView
{
get
{
return _listView;
}
set
{
_listView = value;
OnPropertyChanged("BigImageView");
}
}
I want to return the image to the content control when I move the listbox. I have been racking my brain and trying everyhitn but it does not work. any help would be appreciated.
There is no need to bind the selecteditem, the collectionview should take care of that.
Try this:
<ListBox ItemsSource="{Binding BigImageView}" IsSynchronizedWithCurrentItem="True" />
<ContentControl Name="Detail" Content="{Binding BigImageView, Mode=OneWay}" VerticalAlignment="Top">
<ContentControl.ContentTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
<ContentControl.ContentTemplate>
1
Create a viewmodel with a list and a selected item:
public class BigImageViewModel : INotifyPropertyChanged
{
private string bigImage;
//string for path?
public ObservableCollection<string> BigImageView {get; set; } //Of course, make sure it has a value
public string SelectedBigImage
{
get { return bigImage; }
set { bigImage = values; NotifyPropertyChanged("SelectedBigImage"); }
}
}
Set this object on the DataContext of your control in the constructor:
DataContext = new BigImage(); //Make sure you initialize your list
Set the ListBox ItemsSource to your BigImage list, bind your SelectedItem to BigImageView
and use that in your content control:
<ListBox ItemsSource="{Binding BigImageView}" SelectedItem={Binding SelectedBigImage} />
ContentControl:
<ContentControl Name="Detail" Content="{Binding SelectedBigImage, Mode=OneWay}" VerticalAlignment="Top">
<ContentControl.ContentTemplate>
<DataTemplate>
<Image Source="{Binding}"/> <!-- Nice template for showing your string BigImage -->
</DataTemplate>
<ContentControl.ContentTemplate>
</ContentControl>
2
Or screw that view model:
Set the list directly in the constructor (after the InitializeComponent() ):
myListBox.ItemsSource = ObservableCollection<string>(); //Make sure you initialize your list with whatever your object is..
Give the list a name:
And bind with an ElementName binding to your selected item:
<ContentControl Name="Detail" Content="{Binding ElementName=myListBox, Path=SelectedItem}" VerticalAlignment="Top">
<ContentControl.ContentTemplate>
<DataTemplate>
<Image Source="{Binding}"/> <!-- Nice template for showing your string BigImage -->
</DataTemplate>
<ContentControl.ContentTemplate>
</ContentControl>
I am developing window phone 7 application. I am new to the window phone 7 application. I have the following listbox control in my application
<ListBox Margin="0,355,70,205" Name="WeekSummaryListBox" DataContext="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Amount}" Foreground="Orange"></TextBlock>
<TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Currency}" Foreground="Orange"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Template>
<ControlTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
</ListBox>
In the above listbox control items are displayed vertically. I want to display the items in a listbox control horizonatlly. So I am using the following code.
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
but when I put the two textblock inside stackpanel it gives error. For this I am using the following code
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Amount}" Foreground="Orange"></TextBlock>
<TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Currency}" Foreground="Orange"></TextBlock>
</StackPanel>
I am trying for the following code. In the following code I am getting error
<ListBox Margin="0,355,70,205" Name="WeekSummaryListBox" DataContext="{Binding}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Amount}" Foreground="Orange"></TextBlock>
<TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Currency}" Foreground="Orange"></TextBlock>
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
</ListBox>
I am getting the error "Cannot explicitly modify children collection of Panel used as ItemsPanel for ItemsControl.ItemsControl geneartes child elements for Panel"
I am using the following function to display the data in the ListBox:
public void WeekSumValue(int TransactionType_ID)
{
UserInterfaceManager UserInterfaceManagerObj = new UserInterfaceManager();
List<UserInterfaceManager.TotalSummary> WeekSummary = new List<UserInterfaceManager.TotalSummary>();
ObservableCollection<AmountCurrency> WeekIncomeSumCollection = new ObservableCollection<AmountCurrency>();
WeekSummary = UserInterfaceManagerObj.LoadWeekSum(SelectedButtonName, TransactionType_ID, selectedDate);
foreach (UserInterfaceManager.TotalSummary vWeekSummary in WeekSummary)
{
WeekIncomeSumCollection.Add(new AmountCurrency(vWeekSummary.Amount, vWeekSummary.Currency));
}
if (WeekIncomeSumCollection.Count != 0 && SummaryCombobox.SelectedIndex == 0)
{
WeekSummaryListBox.ItemsSource = WeekIncomeSumCollection;
}
else if (WeekIncomeSumCollection.Count != 0 && SummaryCombobox.SelectedIndex == 2)
{
MonthSummaryListBox.ItemsSource = WeekIncomeSumCollection;
}
else
{
ObservableCollection<TextBlock> NoRecordsCollection = new ObservableCollection<TextBlock>();
TextBlock NoRecordsTextBlock = new TextBlock();
NoRecordsTextBlock.Text = "No record found";
NoRecordsTextBlock.FontSize = 25;
NoRecordsTextBlock.Foreground = new SolidColorBrush(Colors.Gray);
NoRecordsCollection.Add(NoRecordsTextBlock);
if (SummaryCombobox.SelectedIndex == 0)
WeekSummaryListBox.ItemsSource = NoRecordsCollection;
if (SummaryCombobox.SelectedIndex == 2)
MonthSummaryListBox.ItemsSource = NoRecordsCollection;
}
}
In the above function data is coming dynamically. There can be two, three or more records also there can be no record. I am binding this dynamic data to the textblocks which are inside the listbox
I am using the following class used in the above code
public class AmountCurrency
{
public int Amount { get; set; }
public String Currency { get; set; }
public AmountCurrency(int Amount, String Currency)
{
this.Amount = Amount;
this.Currency = Currency;
}
}
How should I put the above two textbock inside the listbox which will display the items horizonatlly ? Can you please provide me any code or link through which I can resolve the above issue ? If I am doing anything wrong then please guide me.
It looks to me like you've got the two text blocks inside the wrong part of the template.
These two text blocks should be in the ListBox.ItemTemplate, not in the ListBox.ItemsPanelTemplate:
<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="300" Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Amount}" Foreground="Orange"></TextBlock>
<TextBlock TextWrapping="Wrap" Width="150" Text="{Binding Currency}" Foreground="Orange"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you want to understand how this control works, then start from a working "basic" control which shows items and then look at adding the ItemsPanelTemplate to that working sample.
Replace DataContext="{Binding}" with ItemsSource="{Binding}" that works for me.