I am working on Windows Phone 8. When i tap on the items i need to highlight selected item. I use the LongListSelector with DataTemplate.
<DataTemplate x:Key="mySelector">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding MyImage/>
<TextBlock Grid.Column="1"
TextWrapping="Wrap"
Text="{Binding Caption}"
VerticalAlignment="Center"
HorizontalAlignment="Stretch">
</TextBlock>
</Grid>
</DataTemplate>
.....
<phone:LongListSelector Style="{StaticResource MyTextBlockStyle}" />
I watched this example http://code.msdn.microsoft.com/wpapps/Highlight-a-selected-item-30ced444. There are two ways - use user control(I do not fit) and search for child elements(I can not find my TextBlock). I need a change in the allocation of color foreground in textblock. Give a simple way to do this.
I had once tried using Visual trees and drilling to the specific selected item and changing the background color of the grid inside the data template.
What i observed was that, the larger is the number of items in the LongListSelector, longer is the time taken to highlight the item. A few times i had also seen the screen going white if i select an item and the resuming to original content with the selected item after say 2 to 3 seconds which was BAD. That time i had switched to a ListBox which worked fine for any number of entries in the List. That can't be a solution though, but thats what i had experienced about LongListSelectors and coloring the selected item.
Related
Working on the XAML file and C# at the back end.
I have totally 4 buttons.
By clicking 1st, other three will be Visible and by clicking same 1st button the three will hide.
Though they are working fine, I want them to aligned vertical and not horizontal by breaking the line.
Also I need to add images before each buttons. Something like this.
Please suggest. Thank you.
Followed this answer, but I understand its for the text and not for buttons.
Here's by code for the buttons:
<Button Content ="Buttons" Click="ButtonBase_OnClick" Margin="15,15,15,15"></Button>
<Button Content="Topo Map" Visibility="Collapsed" Click="Topo_OnClick"
Name="But2" Margin="15,15,15,15"/>
<Button Content="Street Map" Visibility="Collapsed" Click="Street_OnClick"
Name="But3" Margin="15,15,15,15"/>
<Button Content="Imagery Map" Visibility="Collapsed"Click="Imagery_OnClick"
Name="But4" Margin="15,15,15,15"/>
You will need to wrap your buttons in a content container, like a stackpanel or grid. Keep in mind a stack panel will size to fit it's contents where a grid can size to fit available space. I would use a stackpanel to hold the buttons and a grid to hold your button content:
<StackPanel Orientation="Vertical">
<Button Click="ButtonBase_OnClick" Margin="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image />
<TextBlock Text="Buttons" />
</Grid>
</Button>
...
</StackPanel>
I think you're looking for the WrapPanel of the Silverlight Toolkit.
I have a page that has a listbox with the following item template as follows:
<ListBox x:Name="test">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid MaxHeight="108" Margin="0,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Height="108" Grid.Column="0" Fill="{Binding Color}"/>
<Image Source="{Binding Image}" Height="108" Width="108" Grid.Column="1" HorizontalAlignment="Left" Stretch="UniformToFill"/>
<StackPanel Grid.Column="2">
<TextBlock Text="{Binding Title}" TextWrapping="NoWrap" />
<TextBlock Text="{Binding SubHeading}" TextWrapping="NoWrap" />
<TextBlock Text="{Binding Body}" TextWrapping="Wrap" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
On the OnNavigatedTo event of the page, I set the item source of the list box to an observable collection of about 20 items.
All is well and the list is populated, however when I scroll up or down the list, the items appear to look out of sync on the UI. e.g the text that was shown on the first list item appears on the last item in the list box, sometimes there's duplicates, and everytime you swipe up or down the items are different.
I have debugged the listbox items, and I can see that correct objects are being bound to the right items. So it's only what is shown on the UI that is incorrect.
I have also tried explicitly using the standard stackpanel as opposed to a virtualizationstackpanel and that works around the issue by making sure all items are loaded in memory.
I don't believe that removing virtualization is the answer. There must be a root cause. However it may be acceptable as my listbox will never really contain more than 30 items.
On another page, I do the same thing with the silverlight toolkit longlistselector, and have the same issue. However I am not sure of how to remove virtualization on a longlistselector.
So to summarize, what might be the underlying issue that causes the listbox items to not update the UI properly when scrolling? If removing virtualization is the only answer, how may I do this on the longlistselector?
Thanks for anyhelp on this.
Maybe it is some sort this problem? (jumpy ListBox while scrolling)
As it turns out, it was a binding issue, and nothing to to with the listbox whatsoever.
I was (unknowingly) removing the binding of some properties in the item template, after I had bound to them (in some other bit of code) Therefore every time the listbox recycled the containers for new items, it could not update it with the correct info.
Thanks all for your help
I have a grid of controls, where each editable control (checkbox, combobox, etc.) has an associated label. I want to share a tooltip between the label and its control.
Now this is something that I have accomplished by using BindableToolTips: I simply define the ToolTip in my XAML resources, and then set the same ToolTip object individually on the label and the control.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Content="Example" />
Unfortunately, this doesn't make it appear smoothly... When the mouse is moved from the label to the control, or from the control to the label, the tooltip disappears and reopens, appearing to flicker. This occurs even when there is no gap between the label and control, and does not look good. This obviously occurs because they are two separate tooltips.
I would like to somehow group the label and its associated control, and have the tooltip appear on that single group; this way, it can appear fluidly and not flicker when the mouse is moved between the two. Unfortunately, I am struggling to do this. Here are some things I have tried...
Empty TextBlock with the tooltip applied and ColumnSpan=2.
Unfortunately, this prevents the control from receiving mouse clicks, as the TextBlock covers it up invisibly. I have tried setting IsHitTestVisible to false, but then that prevents it from receiving mouse over events, which stops the tooltip appearing at all. If I could just make it so that the mouse clicks through the empty TextBlock, but the TextBlock still gets mouse over events, then it would be perfect.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}" />
Nested grid specifically for the one label and one control.
This method seems to work: the tooltip appears whenever the mouse is anywhere over the inner grid, and mouse events are still successfully passed to the control. Unfortunately, this has three problems:
It is very messy, as I will need many nested grids for every label/control combination.
The "Auto" column widths no longer take into account the widths of other controls in the outer grid, because this is of course a separate grid.
It seems to ignore the tooltip placement settings, which are Placement=Right and with PlacementTarget being the specific control. Instead, the tooltip appears underneath the inner grid.
If the last two problems could be fixed, then this would be an acceptable solution.
Code:
<Grid Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
</Grid>
Does anybody have any ideas for a good solution to this problem? I simply want my tooltips to appear over both the label and the associated control as though they are one element, without flickering when the mouse is moved between them all. That's all.
Just wrap the controls in a content presenter and attach the tooltip to that.
<Window x:Class="StackOverflowWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<ContentPresenter ToolTip="Blah">
<ContentPresenter.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Example label:"/>
<CheckBox Grid.Column="1" x:Name="ExampleControl" Content="Example" />
</Grid>
</ContentPresenter.Content>
</ContentPresenter>
</Window>
I'm trying to setup a ListBox so that every item has a textblock and a combobox, split evenly across the width of the listbox but I can't seem to find the magic combination of ColumnDefinition properties to do it. Here's my DataTemplate for the listbox item. I've cleaned it up since it was wrong, anyhow.
<DataTemplate x:Key="MyDataTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding XPath=text()}"/>
<ComboBox Grid.Column="1" SelectedIndex="0" ItemsSource="{Binding Source={StaticResource Names}, XPath=Name}"></ComboBox>
</Grid>
</DataTemplate>
I've tested a simple application with a grid on a window. Simply specifying two ColumnDefinitions make them automatically take up half of the width, which is nice, but when doing the same in a listboxitem datatemplate, the behavior is different.
How would I change the datatemplate to make it work?
Thanks!
The default HorizontalContentAlignment for a ListBox is Left. You need to set it to Stretch for the ListBoxItems to take up the entire width.
Here's some more info on ListBox/ListBoxItem styles and templates: http://msdn.microsoft.com/en-us/library/cc278062(VS.95).aspx
I have a ListBox with many objects displayed, each of which can be a variable height, based on the number of values each object has. See my previous question that was answered here.
Many objects are 5-lines high, while others are 1. The scroll bar in the ListBox does not appear to like this, probably due to the virtualization. While you scroll through, the thumb on the scroll bar will change its size, based on how many items are actually fitting into the box at that current moment. This makes the thumb very big at times, and very small at other times.
Since this ListBox is also contained within a TabControl, when you switch from one tab to another, the ListBox will often scroll to a different section when you return to it.
Any ideas how to resolve an issue like this?
Additional Info:
Disabling virtualization does fix the scrolling problem, although at the cost of a slower initial display. However, resizing the ListBox with the content inside causes some heavy lag when resizing horizontally (vertical is fine), which I'm assuming is due to my template's width changing and requiring a redraw on every element:
<DataTemplate DataType="{x:Type xmlset:Variable}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="1,0,0,1" BorderBrush="Black">
<TextBlock Margin="2,2,0,2" Text="{Binding Path=Identifier.Name, Mode=OneWay}"/>
</Border>
<ItemsControl IsTabStop="False" Grid.Column="1" ItemsSource="{Binding Path=Values, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="1,0,0,1" BorderBrush="Black">
<TextBlock Margin="2,2,0,2" Text="{Binding Path=Optimization, Mode=OneWay}"/>
</Border>
<Border Grid.Column="1" Width="Auto" BorderThickness="1,0,1,1" BorderBrush="Black">
<TextBox Margin="0,2,0,2" BorderThickness="0" Text="{Binding Path=Value}" TextChanged="TextBox_TextChanged"/>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>
This is drawing borders around the edges of the fields to make a visual grouping, where val will stretch to the content size. The listbox also has HorizontalContentAlignmment = Stretch to ensure this looks correct.
-------------------
- var - opt - val -
- -------------
- - opt - val -
- -------------
- - opt - val -
-------------------
note: if this needs to be asked in a different question, tell me and i'll seperate the questions
Why not switch off any size restrictions on the ListBox itself, let it size to contents and wrap it into a ScrollViewer, setting a proper size for the latter?
The markup should look like the following:
<ScrollViewer Width="640px" Height="480px">
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<!--Visualization of a list item-->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
I saw no thumb size changings during scrolling if it was implemented this way.
Set ScrollViewer.CanContentScroll="False" on the ListBox, this will disable what's called "logical scrolling", which does scrolling based on item count instead of height ("physical scrolling").
Disable virtualization or make the items in your ListBox all of equal height. If you've got less than 100 items or so, you can live without the virtualization.