When using Windows Phone App, the problem often encountered
"list so long, Item so much, why can not I pulled directly specified in Item?"
This article aims to solve this problem, developers can easily give you for your ListBox bonus, become "ListBox, change"
starting from built-in controls for the bonus point of view, I hope that readers can learn about how to write a self-CustomControl (custom controls)
Trouble with Windows Phone App, often encounter
"List so long, Item so much, why can not I pulled directly specified in Item?"
This article aims to solve this problem, developers can easily give you for your ListBox bonus, become "ListBox, change"
From the built-in controls for the value point of view, we hope that readers can learn about how to write a self-CustomControl (Custom Controls)
It is expected to reach the target
- Compose a new control ListBoxWithScrollBar, providing local user to quickly switch to want to see
- Avoid modifiers existing programs too much, new controls must be compatible with the old ListBox
Practical steps
- The ListBoxWithScrollBar inherited from ListBox
- ListBoxWithScrollBar disposed in appearance, the Slider added, and it is expected to be used as ScrollBar
- Slider to adjust the appearance of the above configuration, it looks like this ScrollBar looks like
- Let the ScrollBar to make some action
I started working on it
A new class (Class) in the project, called ListBoxWithScrollBar
In order to make their own written to strengthen the new ListBox control "ListBoxWithScrollBar" can be compatible with existing ListBox, so you can directly inherit it
public class ListBoxWithScrollBar : ListBox
For compatibility in ListBox, I have decided to refer to (steal) ListBox of Template
Just pull a ListBox, edit it and press the right → Templates → edit the copy, jumped out to establish Style Resource window, the name is not important, as defined in this document please choose
XAML in the profile can be found as in the following Style
It is amazing, this is the native controls the ListBox Template, in other words, this is the appearance presented ListBox
The reason may be that there are rolling ListBox named "ScrollViewer" the ScrollViewer control
ListBox can generate one reason is that there are ItemsPresenter Item Controls
The Template needs some modification before they can be applied on ListBoxWithScrollBar
First copy the entire Template down, stick to App.xaml and notice should be placed within Application.Resources label, and be careful not to move the original project
The reason to stick to App.xaml in, because of the need to look CustomControl placed Application.Resources a whole domain
Next we want to change this Template of TargetType ListBoxWithScrollBar
Cut back ListBoxWithScrollBar.cs, adding DefaultStyleKey = typeof (ListBoxWithScrollBar) in the constructor; so they can apply custom controls just written Template
public ListBoxWithScrollBar()
{
DefaultStyleKey = typeof(ListBoxWithScrollBar);
}
Slider in ListBoxWithScrollBar added, and this will be put into Slider straight, on the far right
Like the general common as ScrollBar
So far, ListBoxWithScrollBar this control in the ListBox just put a Slider unresponsive
Then let Slider into a real functional ScrollBar
Switchback ListBoxWithScrollBar.cs, and a class name added to the above [TemplatePartAttribute (Name = "ItemNavigateSlider", Type = typeof (Slider))]
TemplatePartAttribute Italy must have a control named ItemNavigateSlider in the Template statement (provisions) in the control, and this control is Slider class
So we can ListBoxWithScrollBar.cs in through base.GetTemplateChild ( "ItemNavigateSlider") as Slider; to get an instance of the Slider
[TemplatePartAttribute(Name = "ItemNavigateSlider", Type = typeof(Slider))]
public class ListBoxWithScrollBar : ListBox
{
Slider itemSlider;
public ListBoxWithScrollBar()
{
DefaultStyleKey = typeof(ListBoxWithScrollBar);
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
itemSlider = base.GetTemplateChild("ItemNavigateSlider") as Slider;
}
}
After obtaining a Slider instance makes things
Because Slider when pulling trigger event ValueChanged, as long as we listen to this event, and when the user pulls on the ListBox make corresponding treatment
Standing on the shoulders of giants to develop, really easy: D
I hope slide Slider, which can be slid to the ListBox corresponding Item
It should be consistent with the current maximum Slider Items in the number and magnitude of the Slider's minimum modifier is 1.0 to meet the expected "Slider moving a grid, ListBox on a moving grid"
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
itemSlider = base.GetTemplateChild("ItemNavigateSlider") as Slider;
if (itemSlider != null)
{
if (this.Items == null)
{
itemSlider.Visibility = System.Windows.Visibility.Collapsed;
}
else
{
itemSlider.Maximum = this.Items.Count - 1;
itemSlider.SmallChange = 1.0;
itemSlider.LargeChange = 10.0;
itemSlider.Value = itemSlider.Maximum;
itemSlider.ValueChanged += itemSlider_ValueChanged;
}
}
}
When Slider.ValueChanged trigger, we have to write a good method through ScrollIntoView ListBox, the screen will scroll to the place to go
However, the scroll where it?
The ListBox Item, which is the next larger Index
But put straight Slider (Orientation = "Vertical"), the following value is smaller
It seems a bit of trouble ...
We had no choice but to difference (maximum value - the current value) way to solve this problem
In fact, Slider has a property called IsDirectionReversed, allowing gradual increase and decrease the value in the opposite direction, which is left to the reader to test the La
private void itemSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs
e)
{
Slider targetSlider = sender as Slider;
if (targetSlider != null)
{
Int32 scrollItemIndex = (Int32)(targetSlider.Maximum - targetSlider.Value);
if (this.Items.Count >= scrollItemIndex)
{
Object targetItem = this.Items.ElementAt(scrollItemIndex);
this.ScrollIntoView(targetItem);
}
}
}
So far, pulling ListBoxWithScrollBar has been achieved in the ScrollBar, want to quickly switch places
However, there are still some problems to be solved
1. The ScrollBar looked awkward, it is obviously straight Slider
2. Slide ListBox, ScrollBar did not follow the next move
Examples of this program
[Windows Phone developers] to increase the functionality of it ListBox - added Quick Tour ScrollBar (lower)
Original: Large column [Windows Phone developers] to increase the functionality of it ListBox - added Quick Tour ScrollBar (on)