I have one listbox control in my xaml par.My code for listbox is
<ScrollViewer Grid.Row="2" Name="ScrollGrid" VerticalScrollBarVisibility="Auto" VerticalAlignment="Top" Height="Auto" Width="450" Margin="0,100,0,0" >
<ListBox x:Name="TransactionList" Grid.Row="2" HorizontalAlignment="Center" Margin="0,0,0,0" Width="400" Height="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,-10,0,0" Height="120" Width="400" MouseLeftButtonUp="StackPanel_MouseLeftButtonUp">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="80" Width="300" Margin="0,0,20,0">
<TextBlock Height="Auto" Margin="20,0,0,0" VerticalAlignment="Center" Text="vodafone vas" FontSize="30" Foreground="Gray" Name="tbCitynameFavorite" />
</StackPanel>
<StackPanel Orientation="Vertical" Height="60" Width="60" Margin="0,0,0,30">
<Image Name="imgfevdlt" Width="50" Height="40" VerticalAlignment="Center" FlowDirection="LeftToRight" Source="/VodafoneAugmentedReality;component/Images/ArrowMoreSmall.png" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="10" Width="350" Margin="-360,60,0,0">
<Image Source="/VodafoneAugmentedReality;component/Images/SaperaterLine.png" Width="350" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
When i run application this will not display any data
But when i comment out this two tag than it will run perfectly
<ListBox.ItemTemplate>
<DataTemplate>
Here i have only static value so it will ok but when i have multiple value than it will create problem
So plase help me i can solve this problem?
You will have to set up a class (say ListBoxItem ) which contains all the properties of your DataTemplate members values
And then define a List of ListBoxItem 's and set it as the ItemSource of your ListBox
Example code
public class ListBoxItem
{
public string CityNameFavorite { set; get; }
// Other required properties follows here
}
List<ListBoxItem> listBoxItems = new List<ListBoxItem>();
listBoxItems.Add(new ListBoxItem() { CityNameFavorite = "Vodafone vas" });
//Add as many items you need
TransactionList.ItemsSource = listBoxItems;
This is just an overview of how it can be achieved, improvise based on your needs
Related
I know there should be a simple solution to this question but I just cant seem to figure it out here is what my code looks like:
<ListBox HorizontalAlignment="Left"
x:Name="locationsNB"
VerticalAlignment="Top"
Height="563"
Width="455"
SelectionChanged="locationsNB_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Margin="18,0,0,0"
x:Name="placeDetails">
<Image Source="{Binding icon}"
Height="40"
Width="40"
VerticalAlignment="Top"
Margin="0,10,8,0" />
<StackPanel Width="350">
<TextBlock Text="{Binding name}"
FontSize="35"
Foreground="#399B81"
TextWrapping="Wrap" />
<TextBlock Text="{Binding vicinity}"
FontSize="20"
Foreground="#888888"
TextWrapping="Wrap" />
<TextBlock x:Name="reference"
Text="{Binding reference}"
Visibility="Collapsed" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to get the stackpanel->reference text (Text="{Binding reference}") of the selected item I dont know what my C# should look like but any help will be greatly appreciated.
If the ItemsSource of your ListBox is bound to a collection of items then you can use the SelectedItem property of the ListBox
private void locationsNB_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var listbox = (ListBox)sender;
var myObject = listbox.SelectedItem as MyCustomObject;
if (myObject == null) return;
// perform your custom logic with this item
}
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Is there any way to get XAML element by Tag property?
I have a code like this:
<ListBox x:Name="ImageListBox" ScrollViewer.VerticalScrollBarVisibility="Disabled"
Height="100" >
<ListBox.ItemsPanel >
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemHeight="100" ItemWidth="110" VerticalAlignment="Center" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Tap="StackPanel_Tap" Tag="{Binding Type}" Name="Yashu">
<Border BorderThickness="{Binding Thickness}" CornerRadius="0" BorderBrush="White" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1" >
<!--<Grid>-->
<Image Tag="{Binding Type}" Source="{Binding Location}" Opacity="1" Width="100" Height="100" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="True" >
</Image>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
How to get an grid element in ListBox by its tag name?
In the event handler StackPanel_Tap, convert the sender to grid.
object tag = (sender as Grid).Tag;
and to get the grid element use Grid grid1 = sender as Grid;
Note: This works only if user taps on an item. I hope it helps
I'm using ListBox with custom DataTemplate, in this DataTemplate I have two thumbnails, when user clicks on one of this images I need to display a popup with a full-sized image(something like lightbox in JavaScript). I tried to use the Popup control in the DataTemplate, but the popup is positioned to current element on ListBox, not centered in the screen, and I'm not able to make it modal. I also tried to use the Coding4Fun toolkit, but I can't find any documentation or do it without any help.
Here is code of listbox:
<ListBox MaxHeight="600" ItemsSource="{Binding Items}" x:Name="LooksList" u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreDataCommand}" d:LayoutOverrides="GridBox" BorderThickness="0" Margin="0,0,0,62">
<ListBox.ItemTemplate>
<DataTemplate>
<views:LookListItem />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And views:LookListItem:
<Grid x:Name="LayoutRoot">
<StackPanel x:Name="MainPanel" Margin="0,53,0,0" Orientation="Horizontal">
<StackPanel x:Name="PhotosPanel" Margin="20,11,0,0" Width="198" Height="126" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
<Border BorderThickness="3" BorderBrush="White" Margin="0" HorizontalAlignment="Left" Width="93" Height="126">
<Image Source="{Binding Photo1.Thumb}" VerticalAlignment="Center" Tap="Image_Tap" />
</Border>
<Border BorderThickness="3" BorderBrush="White" Margin="12,0,0,0" HorizontalAlignment="Right" Width="93" Height="126">
<Image Source="{Binding Photo2.Thumb}" VerticalAlignment="Center" />
</Border>
</StackPanel>
</StackPanel>
</Grid>
Photo1 and Photo2 should be clickable and after click it should be a popup.
Thanks in advance!
There are a few ways you can go about doing this. I'll show how you can do this with a little code behind.
In your xaml:
<Grid>
<ListBox ItemsSource="{Binding MyItems}" ItemTemplate="{Binding MyTemplate}"
SelectionChanged="ListBox_SelectionChanged"/>
<Popup x:Name="Popup">
<Grid>
<ToggleButton Content="X"
IsChecked="{Binding IsOpen, ElementName=Popup, Mode=TwoWay}"
HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Image x:Name="PopupImage"/>
</Grid>
</Popup>
</Grid>
In your code behind:
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs args)
{
ListBox listBox = (ListBox)sender;
MyImageObject obj = (MyImageObject)listBox.SelectedItem;
ImagePopup.Source = MyImageObjct.LargeImageSource;
Popup.IsOpen = true;
// Unselect item so user can "reselect" it -- If you need item later, save it somewhere
listBox.SelectedItem = null;
}
// Handle the back key button to close the popup
protected override void OnBackKeyPress(CancelEventArgs e)
{
if(Popup.IsOpen)
{
Popup.IsOpen = false;
e.Cancel = true;
}
}
UPDATE BASED ON LATEST INFO
If you do not need your view in a separate UserControl (no logic, only placement of controls) you can still use the example, but instead of listening to the SelectionChanged event, listen to the Tap event of each Image.
<ListBox MaxHeight="600" ItemsSource="{Binding Items}" x:Name="LooksList"
BorderThickness="0" Margin="0,0,0,62">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="MainPanel" Margin="0,53,0,0" Orientation="Horizontal">
<StackPanel x:Name="PhotosPanel" Margin="20,11,0,0" Width="198" Height="126" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
<Border BorderThickness="3" BorderBrush="White" Margin="0" HorizontalAlignment="Left" Width="93" Height="126">
<Image Source="{Binding Photo1.Thumb}" VerticalAlignment="Center" Tap="Image1_Tap" />
</Border>
<Border BorderThickness="3" BorderBrush="White" Margin="12,0,0,0" HorizontalAlignment="Right" Width="93" Height="126">
<Image Source="{Binding Photo2.Thumb}" VerticalAlignment="Center"
Tap="Image2_Tap" />
</Border>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
The event of for Tap events would look something like
private void Image1_Tap(object sender, GestureEventArgs gestureEventArgs)
{
MyImageObject obj = ((FrameworkElement)sender).DataContext as MyImageObject;
// This is the event for Image1 Thumb, so show the Image1 Large
ShowPopup(obj.Photo1.Large);
}
If you do need a separate UserControl
You could create an "ImageOverlay" view much like in my Custom MessageBox Post. In your LookListItem view subscribe to the tap event for both thumbs
<Grid x:Name="LayoutRoot">
<StackPanel x:Name="MainPanel" Margin="0,53,0,0" Orientation="Horizontal">
<StackPanel x:Name="PhotosPanel" Margin="20,11,0,0" Width="198" Height="126" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
<Border BorderThickness="3" BorderBrush="White" Margin="0" HorizontalAlignment="Left" Width="93" Height="126">
<Image Source="{Binding Photo1.Thumb}" VerticalAlignment="Center" Tap="Thumb1_Tap" />
</Border>
<Border BorderThickness="3" BorderBrush="White" Margin="12,0,0,0" HorizontalAlignment="Right" Width="93" Height="126">
<Image Source="{Binding Photo2.Thumb}" VerticalAlignment="Center" Tap="Thumb2_Tap" />
</Border>
</StackPanel>
</StackPanel>
In the tap events show the ImageOverlay control
private void Thumb1_Tap(object sender, GestureEventArgs gestureEventArgs)
{
ShowOverlay(Photo1.Large);
}
private void Thumb2_Tap(object sender, GestureEventArgs gestureEventArgs)
{
ShowOverlay(Photo2.Large);
}
private void ShowOverlay(ImageSource source)
{
ImageOverlay overlay = new ImageOverlay();
overlay.ImageSource = source;
overlay.Show();
}
<ListBox Margin="0,2,0,0" SelectionChanged="OnSelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="lstUcpPanel" ItemContainerStyle="{StaticResource myContainerStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" Margin="-7,-8,-7,0" ItemWidth="246" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Margin="3.5,1,0,0" BorderBrush="Transparent">
<StackPanel Orientation="Vertical" Background="LightGray">
<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" ></Image>
<TextBlock Text="{Binding name}" TextWrapping="Wrap" Foreground="Black" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am using the above code for showing a data as in following format:
but when the [name] is long like "Settings flkjadsflka fdsaflksdj flhasdjhfl asd", then the design becomes like this:
What i want to know is that is there anyway i can show the items in a uniform format without any distortion with uniform height of the item.
Set the stretch property on your image to Stretch="Fill"
<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" Stretch="Fill" ></Image>
How about giving the items in the WrapPanel a fixed Height?
<toolkit:WrapPanel ItemHeight="80" ... />
Hei,
So lets assume that I have this ListBox.ItemTemplate:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="DataTemplate1">
<StackPanel Orientation="Horizontal">
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="{Binding name}" FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="{Binding age}" FontWeight="Bold"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="blah blah" FontSize="13.333"/>
<TextBlock TextWrapping="Wrap" Text="{Binding something}"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="Time" FontSize="13.333"/>
<TextBlock TextWrapping="Wrap" Text="45 minutes"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
What I want to achieve is that somehow the number of Images in the second stackpanel, this one:
<StackPanel Height="100" Width="100">
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
to be dynamic, two for some list box items, 3 or 4 for others.
I am wondering if its possible to achieve this with binding and templates ?
I don't want to do this manually in code.
You can replace that particular StackPanel with a ListBox. The ListBox can be then bind to the Image-collection and its ItemTemplate can be set to show the images. Like this:
<DataTemplate x:Key="DataTemplate1">
<StackPanel Orientation="Horizontal">
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="{Binding name}" FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="{Binding age}" FontWeight="Bold"/>
</StackPanel>
<ListBox ItemsSource="{Binding DynamicCollectionOfImages}">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Height="100" Source="{Binding .}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Height="100" Width="100">
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="blah blah" FontSize="13.333"/>
<TextBlock TextWrapping="Wrap" Text="{Binding something}"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="Time" FontSize="13.333"/>
<TextBlock TextWrapping="Wrap" Text="45 minutes"/>
</StackPanel>
</StackPanel>
</DataTemplate>
When there are different set of images for every list item you should add another ListBox inside main one and put an Image control as an ItemTemplate.
But when you have just some images-sets (eg. with 2, 3 and 4 static images) for whole list and want to display one of them for every list item you can prepare 3 StackPanel's inside listBoxItem template and change it visibility depending on some property from DataSource. This property value should be converter into a Visibility enumeration member.
Eg. when that images should depend on integer ImagesSet property from DataSource:
<StackPanel Height="100" Width="100" Visibility={Binding ImagesSet, Converter={StaticResources ImagesSetToVisibility}, ConverterParameter=2}>
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
<StackPanel Height="100" Width="100" Visibility={Binding ImagesSet, Converter={StaticResources ImagesSetToVisibility}, ConverterParameter=3}>
<Image Height="100"/>
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
<StackPanel Height="100" Width="100" Visibility={Binding ImagesSet, Converter={StaticResources ImagesSetToVisibility}, ConverterParameter=4}>
<Image Height="100"/>
<Image Height="100"/>
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
The converter should check, if value is equal to parameter and return Visibility.Visbile or Visibility.Collapsed:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((int)value) == ((int)parameter) ? Visibility.Visible : Visibility.Collapsed;
}