I am working with five text boxes and two comboboxes in xaml.
When I click on Tab key it comes from top to bottom(textboxes to comboboxes),
when I click on shift + Tab it doesn't move from combobox to textbox.
My Combobox is
<TextBlock Text="Select" Style="{StaticResource WaterMarkTextBlockStyle}" Visibility="{Binding ElementName=ComboCOM, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<ComboBox x:Name="ComboCOM" ItemsSource="{Binding COM.COM}" SelectedItem="{Binding TestResultsEntity.CountryOfOrigin,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay,ValidatesOnDataErrors=True,ValidatesOnExceptions=True,NotifyOnValidationError=True}" Validation.ErrorTemplate="{StaticResource ErrorTemplateSilverlightStyle}" IsReadOnly="True" IsHitTestVisible="{Binding TestResultsIsHitTestVisible}" Margin="0" Background="Transparent" >
<i:Interaction.Triggers>
<UC:EventTriggerHandler EventName="Loaded">
<i:InvokeCommandAction Command="{Binding GetCOMComboName}" CommandParameter="{Binding ElementName=ComboCOM}"/>
</UC:EventTriggerHandler>
</i:Interaction.Triggers>
</ComboBox>
Could you please provide me the solution,thanks in advance.
Also this is an old post, I wanted to share my experience.
I came across the same problem with TextBoxes and CheckBoxes inside a Window. Tab worked for jumping to the next Control, Shift+Tab did not work.
The solution was to set TabIndex property on all controls in the Window/UserControl.
Related
Hi I want to click through my listBox (click on empty space) and want the click on the underlying border control. I'm really sure that I have done this in the past using {x:Null} as the Background for a control. But this time it doesn't work.
Any hint why?
<Grid>
<Border x:Name="BrushBorder" Background="{Binding ActualBrush}" Margin="7,0" Height="10"
VerticalAlignment="Top" Cursor="Pen">
<dxmvvm:Interaction.Behaviors>
<dxmvvm:EventToCommand EventName="MouseDown" Command="{Binding NewGradientStopCommand}" PassEventArgsToCommand="True" />
</dxmvvm:Interaction.Behaviors>
</Border>
<ListBox x:Name="GradientStopListBox" ItemsSource="{Binding GradientStops}" SelectedItem="{Binding ActualGradientStop}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Background="{x:Null}" BorderBrush="{x:Null}">
I found the answer. The ListBox includes a ScrollViewer and this is causing the mouse click the stay in the ListBox regradless of the BackgroundBrush.
See this question for further information:
Transparent WPF ListBox with selectable items
Is there a way to fix the known bug of Selection Change Event, selecting does not work if the same item is tapped again.
to give further background, my scenario is that I have four items in my pivot page and when I click one of those items i will be navigated to another page. Now my dilemma is that when i select the same items again, navigation does not work or nothing happens.
Please let me know your suggested fix, thanks much in advance.
<ListBox x:Name="lbviewlist" ItemsSource="{Binding items}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="selectionchanged">
<Command:EventToCommand Command ="{Binding ItemListCommand }" PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock TextWrapping="Wrap" Text="{Binding itemName}" FontSize="30" Margin="10,0,0,0" Style="{StaticResource PhoneTextTitle2Style}" Foreground="CadetBlue"/>
<TextBlock TextWrapping="Wrap" Text="{Binding itemDescription}" FontSize="20" Margin="15,5,0,10"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
A good alternative approach is to include all of the content in each item inside a button, which is styled to be invisible so that you never see it, but it covers the surface of the item it encapsulates. If you're using MVVM you can bind the same command property to each of your 'buttons' and bind the DataContext of the button (your data item) to the command parameter. Then whenever you click an item you'll get the command firing every time.
You might want to change your items control to something simple so that the selection changed events dont get in the way.
Seems like this would be a common problem...
I'm using MVVM Light
I have a listbox defined in my xaml
<ListBox ItemsSource="{Binding Events}" SelectedItem="{Binding SelectedEvent, Mode=TwoWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding EventPageCommand, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Padding="0,0,0,22">
<StackPanel>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Preview}" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This works all fine and dandy, except the user is able to click below this list and the event is still fired.
I can modify it to use SelectionChanged such as:
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<cmd:EventToCommand Command="{Binding EventPageCommand, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
But then if I use the back button, I cannot select the same item twice since the selection hasn't actually changed. I could probably go into my codebehind and set the selected index = -1 on page load, but this seems like quite a hack, and I use list boxes in quite a few places and I would hate to have to remember to do this hack everywhere.
Any ideas?
edit
I added background color to my listbox and my listbox items and while my listbox items only take up what space the text occupies, the listbox takes up the entire screen, extending below the last listbox item. Perhaps one way would be to shore up this extra space.
update
what seems to work best so far is to set the VerticalAlignmnet="Top" on the listbox (this shores up the extra space on the bottom, not sure why, but then scrolling ends at the bottom of the list and not the bottom of the screen). I then disabled the scrolling on the listbox itself ScrollViewer.VerticalScrollBarVisibility="Disabled" and wrapped the whole thing in a <ScrollViewer>
Currently you are looking for the Tap event on the whole of the list box, not a individual item.
This is how I typically I use interaction triggers:
<DataTemplate DataType="{x:Type ViewModel:DataItem}" x:Key="ItemTemplate">
<ContentControl>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<i:InvokeCommandAction Command="{Binding Tap}"/>
</i:EventTrigger>
<i:EventTrigger EventName="KeyUp">
<i:InvokeCommandAction
Command="{Binding RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBox}},
Path=DataContext.KeyUpCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBox Text="{Binding Name}"/>
</ContentControl>
</DataTemplate>
In this example the Tap event binds to a command on the DataContext (a data item) of an ItemsControl, whereas the KeyUp event binds to a command on the parent DataContext of the ListBox.
If all you want is to get an event when the user taps an item, why don't you use the trigger code you have on the Border element of the template?
You probably will have to use the Source property to bind the command to the ViewModel, but that can also be easely achieved (will just depend on how you are setting the Page DataContext right now)
I have a Bing silverlight map control for Windows phone 7. I am trying to display on top currently selected pushpin. Here is the snippet:
<my:Map x:Name="map" Canvas.ZIndex="1" CredentialsProvider="{StaticResource Credentials}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed">
<my:MapItemsControl x:Name="Pushpins">
<my:MapItemsControl.ItemTemplate >
<DataTemplate>
<my:Pushpin Location="{Binding Location}" Canvas.ZIndex="{Binding Zindex}" PositionOrigin="0.515625,0.859375" Content="{Binding Id}" Template="{StaticResource PushpinControlTemplate}" Tap="Pushpin_Tap"/>
</DataTemplate>
</my:MapItemsControl.ItemTemplate>
</my:MapItemsControl>
</my:Map>
The control is ignoring the ZIndex. Am I missing something or the ZIndex is not supported. The ZIndex is property of a class which implements INotifyPropertyChanged
private int _zIndex;
public int Zindex
{
get { return _zIndex; }
set
{
_zIndex = value;
OnPropertyChanged(new PropertyChangedEventArgs("Zindex"));
}
}
I had the same problem where I had multiple pushpins close together and the problem was exacerbated when I had additional content to show when the pushpin was clicked.
The way I got around this problem was to remove the pushpin and then re-add it. That way it became the topmost pushpin.
map1.Children.Remove(pushpin);
map1.Children.Add(pushpin);
In a recent project I used two map layers to achieve this. The first map layer was bound to my list of pushpins ("resultsLayer"), the 2nd map layer was bound to a single 'SelectedItem' ("selectedLayer") on my view model.
The 2nd map layer will render on top of the first one. So, when a pushpin on the first layer was selected, it was removed from the collection (consequently removed from the layer) and set to be the selected pin which added it to the 2nd layer. The puspin control template for the 2nd layer contained the 'callout' which in my case was a button with some text in it that the user could click to open another page.
Here is my xaml:
<m:Map CredentialsProvider="xxxx" x:Name="map" Center="{Binding MapCenter, Mode=TwoWay}" ZoomLevel="{Binding MapZoomLevel, Mode=TwoWay}">
<m:MapLayer x:Name="resultsLayer" Visibility="{Binding IsBusy, Converter={StaticResource booleanNotCollapsedConverter}}">
<m:MapItemsControl ItemsSource="{Binding VenuesFound}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding VLocation}" PositionOrigin="BottomCenter" >
<m:Pushpin.Template>
<ControlTemplate>
<Image x:Name="mapPin" Grid.Row="1" Source="{Binding MapPin}" Stretch="None" />
</ControlTemplate>
</m:Pushpin.Template>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<gs:EventToCommand Command="{Binding SelectPinCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</m:Pushpin>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
<m:MapLayer x:Name="selectedLayer" DataContext="{Binding SelectedV}" Visibility="{Binding IsBusy, Converter={StaticResource booleanNotCollapsedConverter}}">
<m:Pushpin Location="{Binding VLocation}" PositionOrigin="BottomCenter">
<m:Pushpin.Template>
<ControlTemplate>
<StackPanel>
<Button Style="{StaticResource PushPinCallout}" Command="{Binding SelectItemCommand}">
<TextBlock Text="{Binding Name}" Foreground="White" Margin="2" TextWrapping="Wrap" />
</Button>
<Image x:Name="mapPin" Grid.Row="1" Source="{Binding MapPin}" Stretch="None" />
</StackPanel>
</ControlTemplate>
</m:Pushpin.Template>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<gs:EventToCommand Command="{Binding SelectPinCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</m:Pushpin>
</m:MapLayer>
</m:Map>
As the BingMapsControl is not a Silverlight control it does not have any concept of a canvas.
Instead of trying to ensure the selected one is at the front, I'd change the selected pin to be of a larger, more prominent style.
It doesn't make sense (to me) to be able to control the z-index of pins as doing so could create a scenario where a pin appears to be on top of another pin, rather than on the map.
I have a HierarchicalDataTemplate which has some simple Items contained in a horizontal StackPanel.
A context menu is assigned to the root StackPanel container as well:
<HierarchicalDataTemplate DataType="{x:Type data:GroupViewModel}"
ItemsSource="{Binding Path=Children}">
<StackPanel Orientation="Horizontal" Margin="2" ContextMenuOpening="groupContextMenuOpening">
<StackPanel.ContextMenu>
<StaticResource ResourceKey="groupContextMenu" />
</StackPanel.ContextMenu>
<Rectangle Width="16" Height="15" Fill="{Binding Converter={StaticResource HierarchyLevelConverter}}" Margin="0 0 3 0" Cursor="Hand" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown" >
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding SetCurrent}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Rectangle>
<Image Width="16" Height="15" Source="{Binding Path=GroupState, Converter={StaticResource GroupStateConverter}}" Cursor="Hand" Margin="0 0 3 0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown" >
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ToggleGroupState}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</StackPanel>
</HierarchicalDataTemplate>
The host TreeView also uses a ContextMenu.
The idea is that if you right click on an item in the TreeView, you will get it's ContextMenu.
If you right clik in empty space in the tree view you will get the 'default' context menu with lesser options.
This is all working expcept one odd problem.
As you can see the horizontal StackPanel leaves a margin between the images. If I right click in that space between items, the TreeView context menu shows up. I would expect the ContextMenu defined in my HierarchicalDataTemplate to pop up as i AM right click on the StackPanel itself.
I've found that if I assign a background color to the StackPanel it then works, but I would prefer to avoid this if possible.
Any ideas?
Set the Background of the StackPanel to Transparent to make it hit test in those empty areas.