I have a XAML ListBox where I am implementing an Image beside that a block of text is there. I want to display a count text in that image. For example for the first block in the image I want to display 1, for the 2nd block I want to display 2. This goes on. Below is the snippet. Can anybody please help me how can I write the count numbers in the image?
<StackPanel Grid.Column="0">
<Image Source="/Assets/Images/pin.png"></Image>
</StackPanel>
<TextBlock Name="locationID" Visibility="Collapsed" ></TextBlock>
</StackPanel>
</StackPanel>
If what you wanna do is display the index of each item of your datasource in your view, there are a couple of ways to do this.
You can save the item's index on a property of the datasource itself and bind that value in your view. This is probably the simplest solution if your collection is static. Cumbersome if dynamic, you would need to manually update the indexes of your collection changes.
You could expose the collection in the app level (making it global), write a converter and provide the item of the collection to it. Then you could search and return the index of that item in your global datasource.
You could implement a multibinding with the Cimbalino Toolkit providing both the item and the datasource and return the index.
here you go
<Grid Grid.Column="0">
<Grid.Background>
<ImageBrush ImageSource="/Assets/Images/pin.png"/>
</Grid.Background>
<TextBlock Text="text on image" Name="locationID" />
</Grid>
whole idea is to place the image as background of grid and place the text as content of the grid.
Related
I'm trying to highlight part of text in a textblock from a listbox datatemplate which in turn is bounded to a property of a custom class by using a textbox to search the list for input text. But the problem is that only part of the items are highlighting (most of the ones visible) but when i maximize the window and try to input another character then suddenly all of them gets highlighted my guess where the problem might be is in this piece of code:
ListBoxItem listboxItemFound= (ListBoxItem)this.listBox1.ItemContainerGenerator.ContainerFromItem(TItem);
Since this method is returning a null when the items are not visible but the items are currently in the listbox. Somehow I guess the items listboxItem instances are not yet created until you scroll down or maximize to view more items.
XAML DataTemplate:
<DataTemplate>
<Grid Name="gridOfListbox" Height="25" Margin="0,2">
<DockPanel Name="dockpanelWithTxtBlock">
<TextBlock Name="textbloxk" DockPanel.Dock="Left" FontSize="15" TextAlignment="Center">
<Run Text="" /><Run Background="Yellow" Text="" /><Run Text="{Binding ProductID}" />
</TextBlock>
</DockPanel>
</Grid>
</DataTemplate>
If more code is needed just let me know.
Any help would be greatly appreciated!!
Also if there is any other better way of finding the listboxItem bounded to the custom Item just let me know. Thank you very much!
[Pic of problem] http://i.stack.imgur.com/HViag.png
One way to fix this is to set VirtualizingStackPanel.IsVirtualizing to false for your ListBox. This will cause all of the items to be created right away. The downside to this is if your ListBox has many items, your program will use more memory (since more items will be created), and could potentially run slower depending on the number of items.
A better solution to consider would be to have multiple DataTemplates for this - one without the highlight, and one with. You can set a DataTemplateSelector for your ListBox (using the ItemTemplateSelector property). The selector can choose which template to use based on if the item matches the search term or not.
The tricky part would be writing the template with the highlighted text. You could probably achieve that by having properties on the object the ListBoxItem is bound to for the text before the highlighted text, the highlighted text, and then the remaining text.
I know this has been asked before but Im a bit confused !
I'm writing my app with MVVM so far so good. but now I need to know what is the best way to access my controls inside a data template in a listbox.
I want to access them through the code behind and also be able to change them based on the other values from the database !
Here is the view :
<ListBox Margin="0,8,0,0" toolkit:TiltEffect.IsTiltEnabled="True" x:Name="counterlist" ItemsSource="{Binding Groups}" HorizontalAlignment="Center" Tap="list_OnTap"
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Orange" Width="125" Height="125" Margin="6">
<TextBlock Name="name" Foreground="White" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap"/>
<TextBlock Name="items" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
This list box is bound to the Groups Observable collection in my viewModel. Again so far so good.
Now I have a method called
public int ItemsinGroup(int gid)
This method returns number of items in each group but its not simply based on this database and it also get some info from an external source so I cant simply make a query to add this also to the observable collection.
I just need to add this to each item in the list box so that it shows the associated item counts for each group.
I want to be able to change it in the code behind. I mean I want to access each loop of data in code behind as well as XAML (Which we are already doing it through binding) .
If I can do so it will be easy to inject ItemsinGroup results to its related item in the list box loop.
Can I do that by placing my method in viewModel ? but what about the current item in the loop, how can I find out what is the current ID of each Group in the listbox loop ?
I need to know what is the best way to do such things, what usually everyone does in these cases !
Thanks a lot
Your desire to use MVVM and yet update individual items in a collection from code behind seem contradictory.
This simplest solution is probably to get your collection of groups and before you bind them to the UI you loop through them and add the count to the objects in your collection.
Alternatively, if you want to bind the collection as quickly as possible and then update it. You could step through the collection once bound and as long as the objects in your collection implement INotifyPropertyChanged you could update them and have a second TextBlock in the ItemTemplate show this when set.
I have a panorama control in which I have create a header template to add a list picker inside it. (Just like the peoples hub to select social accounts)
<DataTemplate x:Key="PanoramaItemHeaderTemplate">
<ContentPresenter>
<StackPanel Height="129">
<TextBlock Text="{Binding}" FontSize="72" Margin="0,7,0,0" />
<toolkit:ListPicker x:Name="listPick" Margin="0,-21,0,0" BorderThickness="0">
<toolkit:ListPickerItem Content="twitter"></toolkit:ListPickerItem>
</toolkit:ListPicker>
</StackPanel>
</ContentPresenter>
</DataTemplate>
The panorama control is inside the MainPage.xaml file and I want to have access to the listpicker from the code behind to be able to populate it, and handle it selection events.
I don't know how to do this. I tried adding the x:name property to the list picker I don't have access to it in the MainPage code behind.
Any idea on how to approach this is very welcomed, thanks!
From what you have now, the quickest way to do what you want is to traverse the visual tree
See here for the implementation:
How to access a specific item in a Listbox with DataTemplate?
You cannot access the ListPicker by x:Name because it is not unambiguous: there is a ListPicker generated for each PanoramaItem in your Panorama. So the first question is, is it really the think you want to do? If so you need to populate it using a binding (ItemSource)
You can access an element inside another resource, consider this example:
<Grid Name="myGrid">
<StackPanel x:Name="stack1">
<TextBlock x:Name="abc"/>
</StackPanel>
</Grid>
We can only access the Grid myGrid in code by default. To get reference to the StackPanel we can do this:
StackPanel myStack=myGrid.FindName("stack1") as Stackpanel;
After that we can get reference to the TextBlock:
TextBlock myTextBlock=myStack.FindName("abc") as TextBlock;
You can modify myTextBlock after that as you may like. You can apply the same technique in your case and it will work.
Hope that helps :).
I need to a collection of groupboxes varying on the user selection. for example; there will be 7 groupboxes, the user can enable however many they want and in what order they want. So i want the selected groupbox B to appear at the bottom of the previously selected groupbox A yet when A is unselected B moves up the form to where A was.
In my mind i want it to behave similar to HTML items.
This will be done in WPF, coding in C#.
You can stack these groupboxes in a stackpanel with orientation=vertical. You can then set the Visibility of the groupboxex to the users decision and wpf will make the rest for you "by magic".
Little sample here:
<StackPanel Orientation="Vertical">
<GroupBox x:Name="First" Visibility="Visible" Header="First">
<Label>First</Label>
</GroupBox>
<GroupBox x:Name="Second" Visibility="Collapsed" Header="Second">
<Label>Second</Label>
</GroupBox>
<GroupBox x:Name="Third" Visibility="Visible" Header="Third">
<Label>Third</Label>
</GroupBox>
</StackPanel>
Put your GroupBoxes in a collection of some kind and databind that collection to a cusomised ListView. Whenever the selected state of a GroupBox changes update the view of that ListView to sort them based on your requirements. Unfortunately I am not good enough to provide a working sample in the time I have, sry.
Backgorund
I am currently writing a program that allows a user to select a manufacture from a combo box. The combo box is created in wpf using the following wpf code segment:
<ComboBox Height="23" Margin="40.422,128.423,229.908,0" Name="itemProductManufacture" ToolTip="Click to open drop down menu" VerticalAlignment="Top" Text="Select A Manufacture" SelectionChanged="itemProductManufacture_SelectionChanged" DropDownOpened="itemProductManufacture_DropDownOpened">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ManufactureId}" Width="0"/>
<Image Name="itemManufactureImage" Source="{Binding ManufactureImage}" Height="15" Width="70" Stretch="Uniform"/>
<TextBlock Text="{Binding ManufactureName}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The data is provided form a database and each entry has a Image, a name and an Id (intentionally not shown)
Problem
I am trying to code the behaviour of the combo box so when it is open the image height is 50 and when it is closed it is 15 this is so the image is larger when it is first displayed and then smaller once selected so it doesn't take up too much space on the form.
I have tried editing the image propities using code but am unable to accsess it using its name or any other children of the combo box.
Thanks
Jonathan
As you are using data template you won't be able to access the directly by its name.
Try something like this -
Image image = this.itemProductManufacture.ItemTemplate.FindName("itemManufactureImage", this) as Image;
One thing I am not clear is whether you want to change image size for all the items or the selected one? If you need to access the image for a particulat item in combobox you may have to use the ItemContainerGenerator.ContainerFromItem, as explained in following posts -
WPF - ItemsControl - How do I get find my "CheckBox" item that is in the ItemTemplate?
http://www.sitechno.com/Blog/HowToUseAttachedPropertiesAsAnExtensionMechanismForACheckedListbox.aspx
look at this, To know the various ways of finding controls - How can I find WPF controls by name or type?
You can edit image properties from code using binding. Or you can use triggers in Datatemplate. When comboboxitems checked properties change, you can change height property of corresponding image
Try this:
<Image Height = "{Binding Path=IsDropDownOpen,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ComboBox}},
Converter={StaticResource myBoolToHeightConverter}}" />
An example for Converter here