I've been trying to make a custom control that represents an alarm annunciator. visually, the control is quite simple and looks something like this:
The important design criteria for the Annunciator control are:
Can be shipped as part of a control library
Has a default style (colours, fonts) that differ from the system defaults but can be overridden by the user
Has text (usually one word, e.g. "ALARM") that can be specified by the user.
The text must flash with one of a number of different cadences, depending on alert severity. Cadence is settable by the user. Cadences include SteadyOn and SteadyOff and a few different alternatives in between.
When the annunciator is on/illuminated, it renders in a colour specified by ActiveColor property.
When the annunciator is off, it renders in the InactiveColor property. InactiveColor is typically close but not identical to the background colour
ActiveColor and InactiveColor can be set by the user.
I have based my custom control on the Control class. The visual tree consists of basically a border and a TextBlock, defined in Generic.xaml like this:
<Style TargetType="{x:Type local:Annunciator}">
<Setter Property="FontFamily" Value="OCR A Extended" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Margin" Value="2" />
<Setter Property="Padding" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Annunciator}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBlock x:Name="AnnunciatorTextBlock"
TextWrapping="Wrap"
Text="{TemplateBinding AnnunciatorText}"
Foreground="{TemplateBinding ActiveColor}"
TextAlignment="Center"
/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Initially I tried to get the animations working using story boards and triggers. This would have been an elegant solution but I ran into a brick wall because in a control template, I was unable to use {TemplateBinding} for the To property of a ColorAnimation. After many hours and much reading, I concluded that this was not a viable option (maybe I'm wrong?).
So I tried again using code-behind and basing my solution on a similar control I did for Windows Forms, several years ago. In that solution I have a Cadencemanager singleton. My controls then register with the CadenceManager and whenever the control needs to be updated, the CadenceManager calls the control's ICadencedControl.CadenceUpdate() method. I tried this technique using a DispatcherTimer to avoid any cross-threading update issues and all of the code runs. In my custom control's update method, I update the foreground colour of the text block like so:
public void CadenceUpdate(bool newState)
{
var brush = newState && IsEnabled && !Muted ? ActiveColor : InactiveColor;
textBlockControl.Foreground = brush;
}
The update method is being called as expected (as evidenced by setting a breakpoint in the debugger). However, the text colour never updates.
So how do I make the colour of my TextBlock element in my custom control update in response to a DispatcherTimer tick event? I just can't see why this isn't working.
You could use VisualStates for the different flashing states:
<ControlTemplate TargetType="{x:Type local:Annunciator}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.Resources>
<Storyboard x:Key="BlinkingStoryboard">
<ColorAnimation
Storyboard.TargetName="AnnunciatorTextBlock"
Storyboard.TargetProperty="Foreground.Color"
From="{Binding InactiveColor,
RelativeSource={RelativeSource TemplatedParent}}"
To="{Binding ActiveColor,
RelativeSource={RelativeSource TemplatedParent}}"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
<!-- more Storyboards -->
</Border.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="FlashStates">
<VisualState Name="Blinking"
Storyboard="{StaticResource BlinkingStoryboard}"/>
<!-- more VisualStates -->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="AnnunciatorTextBlock" Text="Hello">
<TextBlock.Foreground>
<SolidColorBrush Color="{TemplateBinding Foreground}"/>
</TextBlock.Foreground>
</TextBlock>
</Border>
</ControlTemplate>
Note that the Storyboards are declared as resources to make the InactiveColor and ActiveColor bindings work with RelativeSource TemplatedParent.
You would now activate a VisualState like this:
VisualStateManager.GoToState(annunciator, "Blinking", false);
Related
I've this code in C# to create a button as a child of a StackPanel:
`
Button myButton = new Button();
//All button stuff (Background, text...).
myStackPanel.Children.add(myButton);
`
But, as every button, it highlights every time the mouse is over or when I click it. Is there any way to change that in an easy code (I'm still new to C#) can remove that highlight.
I don't know how to do this. I haven't seen anything explaining this and the only codes I could find were in XAML, and I didn't understand them so couldn't translate them to C#.
The problem is all the code I find is about retemplating the XAML code. What I need is to do what I mentioned in C#, as the control is created from scratch in C#.
I took a look at a few of the answers for this and didn't see any I liked much.
WPF controls are lookless, meaning they have fixed behaviour but not specific look to them. You can re template a wpf control to pretty much anything you can describe in xaml. Many wpf controls have quite complicated templates.
Here's one way to template a button as described.
I've put this style in my window's resources. Usually such styles are in resource dictionaries which are merged in app.xaml.
<Window.Resources>
<Style x:Key="NoMouseOverButtonStyle" TargetType="{x:Type Button}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" >
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource NoMouseOverButtonStyle}"
Content="This is my Button"
Click="Button_Click"
HorizontalAlignment="Left"
VerticalAlignment="Top"
/>
</Grid>
</Window>
The button references the style as a resource.
That style sets some defaults so the button has a border you can see but over ride.
The contentpresenter is critical because this is where whatever you make content of your button will appear.
If I set an actual value on a button then that will over ride the style.
Hence
<Button Style="{StaticResource NoMouseOverButtonStyle}"
Content="This is my Button"
Click="Button_Click"
HorizontalAlignment="Left"
VerticalAlignment="Top"
BorderBrush="Red"
/>
Gives me a red border on my button.
A lightgray border is rather simpler than a button has by default.
You could reproduce that. Maybe that'd be an interesting learning exercise.
Lookup the button template on msdn.
Google: "wpf button template msdn"
Take a look at that. Brace yourself - it is complicated.
See the button border brush is hard coded in the template?
Change the style above so it does the same.
Clue:
<Setter.Value>
I'm about to create a new Expander Control (learning purpose) by creating different templates but can't figure out what I'm doing wrong...
ToggleButtonTemplate:
<ToggleButton>
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="eBB" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Path x:Name="Sign" Data="M 0,10 L 7.5,2.5 L 15, 10" Stroke="Black" Width="15">
<Path.RenderTransform>
<RotateTransform Angle="0"/>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Data" TargetName="Sign" Value="M 0,2.5 L 7.5,10 L 15,2.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" Value="#222" TargetName="Sign"/>
<Setter Property="Background" Value="#666" TargetName="eBB"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" Value="#FF003366" TargetName="Sign"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
Expander Template:
<Expander>
<Expander.Template>
<ControlTemplate TargetType="Expander">
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="ContentRow" Height="*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" Visibility="Collapsed" Content="{TemplateBinding Content}"/>
<local:FullSizeExpanderToggleButton Grid.Row="1" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Height" Value="*" TargetName="ContentRow"/>
</Trigger>
<Trigger Property="IsExpanded" Value="False">
<Setter Property="Height" Value="0" TargetName="ContentRow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Expander.Template>
</Expander>
Now when I want to add the Expander in my Main View:
<custom:FullSizeExpander Width="300">
<Button/>
</custom:FullSizeExpander>
the whole space inside the Control gets filled by the Button (the ToggleButton isn't visible anymore).
What am i doing wrong?
In addition I have some questions regarding this issue:
What does "ContentSource="Content"" do? What is it for? Whats different to "Content="{Templatebinding Content}""?
Does the Expander's Property "IsExpanded" get changed when the ToggleButtons Property "IsPressed" gets changed? What if there is no Togglebutton in the Expander at all?
first off, consider modifying your Expander template to look something like this:
<Expander>
<Rectangle Height="500" Width="500" Fill="Red"/>
<Expander.Template>
<ControlTemplate TargetType="Expander">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" x:Name="ContentPresenter"/>
<ToggleButton Grid.Row="1" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentPresenter" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsExpanded" Value="False">
<Setter TargetName="ContentPresenter" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Expander.Template>
</Expander>
I'll explain how it works, and why it wasn't working before from the top-down.
First off, you'll want to actually put something in the expander to make sure it's working - i put a rectangle here with fixed sizes for now.
Next, i changed the first RowDefinition to be auto instead of *, as you want the expander to actually expand when opened. (rather than just hide its content in a big empty area). Auto uses exactly as much space as the content in the row needs, so when it's collapsed, that size will be 0, and when it's expanded, auto will become 500 to fit the rectangle.
The third thing i did was remove your bindings from the ContentPresenter. As it happens, Windows' content-bearing templates (as in anything that can have something else placed inside of it) will automatically look for the first ContentPresenter / ItemsPresenter tag inside its template and shove content into it.
As for the togglebutton however (i kept it simple and left it as a standard togglebutton), this one does actually need a binding.
What i did was a Relativesource Templatebinding to the property "IsExpanded".
Togglebuttons have 2 main states: "Checked" and "Unchecked" (true/false), and Expanders have 2 main states: "Expanded" and "Collapsed" (true/false).
So essentially all i did was tell the ToggleButton to share its true/false state of being checked or unchecked with the parent it sits inside of.
The full binding again is "{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}", which in english is essentially saying "Bind to a related source, and the related source is the parent you're in the template of, and bind so to said template;s "IsChecked" property.
Lastly i changed your triggers which were going the long way around to get the ContentPresenter to become hidden (trying to squash it by reducing the size of the Grid.Row it sits in), and instead just told it to hide when the expander's "IsExpanded" (and thanks to our binding, the ToggleButton's "IsChecked") is set to false, and the opposite when they're set to true.
.
As for your other questions:
1) The ContentSource is used to give the ContentPresenter an alias/alternate name, and i doubt you'll need it anytime soon. The property name is sort of misleading, i grant you.
2) As we saw above, no - the ToggleButton needs to be bound to the templated parent's "IsExpanded" property in order to work.
If you were to take the button out, the Expander simply would not work until you created a binding or made an instruction in code to tell it to open/close.
Hello I have an issue with positioning a popup, in a WP8 app.
My code is that I have instantiated a popup, where the child is a usercontrol, like:
Popup CenterPopup = new Popup();
LayoutRoot.Children.Add(CenterPopup);
CenterPopup = new UsercontrolElement();
This code would make my UsercontrolElement appear precisely in the middle, as it looks in the design view for the xaml code. The problem is that my UsercontrolElement is a waiting screen that I want to be visible during a page navigation in the back. This is not possible when the Popup is added to the LayoutRoot.
If I instead make the popup visible and specify size and what not, the positioning is extremely hard, and I have to handle LandscapeOrientation in usercode by trial and error for CompositTransform.
I was therefore wondering if you could use the above code but instead of adding the element to LayoutRoot, you would at it to something that is not only a root of the page such that the popup continues to have its intended position.
I have illustrated the issue below:
This means it is possible to accomplish inserting the popup from the code behind. But it is independent of the page. Therefore one has to define the rotation for each pageOrientation, and fit the rotation for every popup, which is not a nice solution.
Edit
Okay so I tried to play around with the VisualTreehelper and did this:
Border outBorder = (Border)VisualTreeHelper.GetChild(Application.Current.RootVisual, 0);
ContentPresenter outContent = (ContentPresenter)VisualTreeHelper.GetChild(outBorder, 0);
outContent.Content = popup;
This gives the Desired effect from the image above. However, the secondscreen is never loaded. That is I have a loadedEvent that is never fired.
The solution would therefore might be to go one step up with the VisualTreeHelper, but as far as I know this is the page? And then I would be back to the same issue.
Anyone has an idea`?
If I understand your question correctly, this can be achieved by customizing the PhoneApplicationFrame's style of your phone application.
Inside the ContentTemplate of the default style of PhoneApplicationFrame, you will find a ContentPresenter that hosts the pages of your app. Here you simply need to create another container that hosts your usercontrol on top of this ConcentPresenter. Also you don't have to use a Popup here to host your usercontrol, I'd simply wrap it within another Grid. The reason for this is that Popup has some serious performance issues in WP8. If you have the xaml code placed below the ContentPresenter, it will always be on top of the pages.
<Style TargetType="phone:PhoneApplicationFrame">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}" />
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:PhoneApplicationFrame">
<Border x:Name="ClientArea" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" d:DesignWidth="480" d:DesignHeight="800" Loaded="ClientArea_Loaded">
<Border.Resources>
<Storyboard x:Name="ShowTransitionPopup" AutoReverse="True">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="TransitionPopup">
<EasingDoubleKeyFrame KeyTime="0" Value="-124"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TransitionPopup">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Border.Resources>
<Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
<Grid x:Name="TransitionPopup" Canvas.ZIndex="9999" Background="{StaticResource PhoneAccentBrush}" Height="240" Width="360" Opacity="0" RenderTransformOrigin="0.5,0.5" >
<!-- put your control here -->
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the above example, I've created a little animation called ShowTransitionPopup and it is called when the pages are navigating (OnNavigatingFrom). I didn't specifically write code to position the container since there's just one container you need to handle, it should be quite easy to implement.
I've attached a working sample here for your reference. By pressing the navigation button on the bottom of the page, you will see an animated rectangle fade in and out on the UI.
Hope this helps!
This is not possible in Windows Phone 8. It would be possible in WinRT 8.1. The reason is that you need to go up further than the control where the navigation occurs, and that is the PhoneApplicationFrame for Windows Phone 8. Per the documentation:
Frames
A frame integrates with the Windows Phone look and feel so that it appears like any other application. Only a single frame is available to the application with no exceptions. A frame includes the following characteristics:
•Exposes properties from a hosted page such as screen orientation
•Exposes a client area where pages are rendered
•Exposes a NavigationService that facilitates navigating between pages
•Reserves space for the status bar and Application Bar
If you could go above the PhoneApplicationFrame and host multiple PhoneApplicationFrames, you could put some XAML into it that would allow you to interact with multiple Frames and place something in between the page navigations. However, you can't in Silverlight 8.0. In face, the RootFrame does not have a parent, so you can't even make any other control it's sibling.
If you're willing to build your own navigation service (which I don't recommend), you can simulate this within a single page using UserControls.
I am not sure but try something like this.
var activePage = (PhoneApplicationPage) RootFrame.Content;
var pageContent = (Grid) activePage.Content;
UsercontrolElement childpopup = new UsercontrolElement();
Grid.SetRowSpan(childpopup , pageContent.RowDefinitions.Count);
pageContent.Children.Add(childpopup );
I have a custom button-style with a ColorAnimation.
This works fine, but when pressed multiple times repeatedly, it stays stuck on the target color.
<Style TargetType="Button" x:Key="mainButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Duration="0:0:0.10"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I resolve this ?
Update
Yeh if you cannot afford to remove the Storyboard in Trigger.ExitActions then you do indeed have to address the From issue for intermediate starting Storyboard's yourself.
However specifying a hard-coded From isn't the only solution. You can let the animation reset itself to the underlying base color when it's starting up.
The benefit of this is by not specifying a From you got one less thing to keep track of with future updates.
<Storyboard AutoReverse="True">
<!-- By not specifying a To or From we pretty much reset the property to un-animated state(Exactly what the hard-coded from does) -->
<ColorAnimation Duration="0:0:0"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" />
<!-- This part is same as original time to kick into new Foreground as desired -->
<ColorAnimation Duration="0:0:1.5"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red" />
</Storyboard>
You have not set the From property on your ColorAnimation. So when you press the button in the middle of its animation, the Storyboard takes the current Foreground color value as its From, and this is the color that the animation reverses back to.
Now when you repeatedly press the button, the From color moves closer and closer to red, giving the impression that the color is stuck on red.
Update:
This answer only points out the problem. Refer to Viv's answer for an elegant solution
I have an Image control on my WPF Form. How can I create a border around it during runtime?
Here's my XAML code:
<Image Margin="2.5"
Grid.Column="1" Grid.Row="0"
x:Name="Behemoth" Source="Images/Hero/Behemoth.gif" Stretch="Fill"
MouseEnter="HeroMouseEnter"
MouseLeave="HeroMouseLeave"
MouseDown="HeroMouseClick" />
Also, I want to know how to remove the border.
Maybe if I state my problem better there is an even better solution available.
I have many Images, and when a user says: "Hey, just show me the woman out of all the picture." I want a way to sort of highlight or draw the users attention to whatever images I need them to see. I was thinking about adding a border, but maybe that's too much work for something that can be solved easier.
Any help?
Although it's visually very different from a border, you could use an outter glow to signify the importance of the image. Then, you don't have to change the parent of the image.
Alternatively, you could use a custom Adorner to place a border around the image. Good info on Adorners can be found on msdn.
There's no straightforward way to do it, because the Border is a container, so you would have to remove the Image from its parent, put the Border instead, and put the Image back in the Border...
Another option would be to use templates :
<Window.Resources>
<ControlTemplate x:Key="imageWithBorder" TargetType="{x:Type Image}">
<Border BorderBrush="Red" BorderThickness="2">
<Image Source="{TemplateBinding Source}" />
</Border>
</ControlTemplate>
</Window.Resources>
...
<Image Name="image1" Source="foo.png"/>
When you want to put the border around the image, just assign the template to the image :
image1.Template = this.FindResource("imageWithBorder") as ControlTemplate;
For your stated needs, I suggest you use a ListBox with a custom ItemContainerStyle - one that always has a border but only makes it visible if the item is selected.
Here's the basic idea:
<ListBox ItemsSource="{Binding MyImageObjects}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ListBoxItem.IsSelected" Value="True">
<Setter ElementName="border" Property="BorderBrush" Value="Blue" />
<Setter ElementName="border" Property="BorderThickness" Value="2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>