I put one button in listpicker full mode template. I want when this button is pressed. It Just invoke my defined event. Not act as normal tap on listpicker And closes the full mode of listpicker.
Please see screenshot below.
To include the button in the listPicker full mode, you have to define the data template as such. Go through the listPicker given here
<DataTemplate x:Name="PickerFullModeItemTemplate">
<StackPanel Orientation="Horizontal" Margin="16 21 0 20">
<Button Click="event">
<Button.Content>
<StackPanel>
<Image Source="myImg.png"/>
<TextBlock Text="test"/>
</StackPanel>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
For the behavior you require. Try and test by handling event function on click event in the button. I guess it should work. If not then you have to use popUp instead of listPicker. Or you would have to define your own UserControl in the worst case.
Related
I wrote an example application that highlights the issue, which might have to do with focus-scope because it's whenever a ToolBar is involved and a UserControl is unloaded when switching tabs.
The main window contains a Menu with a File->New command and a TabControl that displays a collection of "Box" instances:
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<MenuItem Command="New"/>
</MenuItem>
</Menu>
<TabControl ItemsSource="{Binding Boxes}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" Width="40"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<local:BoxView/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</DockPanel>
Each "Box" instance has a Name property displayed in the tab header, and the rest of it is displayed in a "BoxView" UserControl. The "BoxView" has a ToolBar, the first button of which becomes the focus hog in the mentioned use case. The "BoxView" also displays a collection of "Compartments" that are inside each "Box" instance:
<StackPanel>
<ToolBarTray IsLocked="True">
<ToolBar>
<Button Content="Focus hog"/>
</ToolBar>
</ToolBarTray>
<ItemsControl ItemsSource="{Binding Compartments}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:CompartmentView/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Each "Compartment" instance has a TotalValue property simply displayed in a TextBox in a "CompartmentView" UserControl:
<StackPanel>
<TextBox Text="{Binding TotalValue}"/>
</StackPanel>
And the problem is...
If I click on the TextBox of any one of the CompartmentView's, and then click a different tab of the main window, the first button of the ToolBar of the BoxView is focused (the focus hog one), disabling commands working in the main window.
It can be observed commands are disabled when opening the File menu. But after closing the menu and reopening, commands are enabled again.
How do I prevent the ToolBar in the nested UserControl from being focused when switching tabs?
Or perhaps I'm going at this wrong... how do I prevent focus from being set when switching tabs?
Update
The following link is a video on youtube where I explain the problem with the application.
https://youtu.be/0T5LK3CYxgw
Solution update
Thanks to themightylc for the answer, the issue was clearly a keyboard focus problem when the focused visual control (any selected "CompartmentView" or "BoxView" control) was unloaded while changing the selected tab in the TabControl. The solution was to focus on the TabControl itself in the main window whenever the tab selection changed:
private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
(sender as TabControl).Focus();
}
Thanks also to Christoph Nahr's response for the solution on this msdn thread: https://social.msdn.microsoft.com/Forums/vstudio/en-US/f5de6ffc-fa03-4f08-87e9-77bbad752033/a-focusscope-nightmare-bug-commands-are-disabled?forum=wpf
<Button Content="Focus hog" Focusable="False" />
This solves the problem you're having. Focusable is a DependencyProperty If you still want to access the ToolBar via Keyboard-Focus, you can bind it or set it from code-behind when the Tab-Switch is complete.
You can of course set it via Style so you don't have to set it on every element of the ToolBar.
i am working on an application using C# WPF and MVVM.The problem i want to show summary on button click event in textblocks and textblocks are inside ListBox as follows:
<ListBox>
<TextBlock
TextWrapping="Wrap"
Height="350"
Text="{Binding ShowVlan}"
</TextBlock>
<TextBlock
TextWrapping="Wrap"
Height="350"
Text="{Binding ShowRouting}">
</TextBlock>
</ListBox>
I have two buttons and i want that if i click 1st button then 1st textblock should be display and on second button click i want to display second textblock .It is working now but the actual problem is that i want to display to on same positions but these are displaying one after another .I am also attaching screenshot for better understanding.
You could simply put both TextBlock at the same Grid Cell and set their Visibility to true/False based on the selected Button :
<TextBlock x:Name="ShowVlanTb" Visibility="Hidden"
TextWrapping="Wrap"
Height="350"
Text="{Binding ShowVlan}" Grid.Row=1 Grid.Colomn=2
/>
<TextBlock x:Name="ShowRoutingTb" Visibility="Hidden"
TextWrapping="Wrap"
Height="350"
Text="{Binding ShowRouting}" Grid.Row=1 Grid.Colomn=2>
/>
and on the button Click event handler set the Visiblity to Visible:
ShowVlanTb.Visibility=Visibility.Visible
ShowRoutingTb.Visibility=Visibility.Hidden
I'm using Prism for Windows Runtime to wire up events in my Views with DelegateCommands in my ViewModels. I am wondering what would be the best way to invoke commands (e.g. select item) from a ListView that contains Buttons (or custom controls derived freom the Button class). I'd like to keep the effects (e.g. background change, tilt effect) provided by the Button control. But the button unfortunately absorbs the click events, which, in consequence, I cannot use in the ListView to hook up my commands e.g with the following XAML (and Behaviors SDK):
<ListView ItemsSource="{Binding AvailableItemsList}" SelectionMode="Single">
<ListView.ItemTemplate>
<DataTemplate>
<customControls:NavMenuButton Style="{StaticResource SelectionListMenuButton}" Content="{Binding Nickname}" DescriptionText="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="SelectionChanged">
<core:InvokeCommandAction Command="{Binding ItemSelectedCommand}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</ListView>
What would be the best way to achieve this? I have found similar questions, but the difference here is that the controls in the list items are apparently "stealing" the click event (while it works just fine with e.g. a simple TextBlock).
To close this question, here is the solution based on MatDev8's comment above (thank you!):
<ListView x:Name="myListView" ItemsSource="{Binding AvailableItemsList}" SelectionMode="Single">
<ListView.ItemTemplate>
<DataTemplate>
<customControls:CustomTextButton Style="{StaticResource SelectionListMenuButton}"
Content="{Binding Nickname}"
DescriptionText="{Binding Name}"
Command="{Binding DataContext.ItemSelectedCommand, ElementName=myListView}"
CommandParameter="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
To have the commands binding in ListView you can use buttons within the ListView.
now for the clicking related issue you can modify your button's Controltemplate to make it look like a simple textblock. this way your clicking will also work on the listview and it will not be displayed as button.
<ControlTemplate TargetType="Button">
<TextBlock Text="{TemplateBinding Content}" />
</ControlTemplate>
You can also customize the click event in other way like moving focus to the button should also raise your click event(indirectly fire your command). This will help in your case of Listview where just moving to next item should also fire the command.
I want to show a popup in a page on a event. I have added a popup in a page's definition. It works fine for the 1st time. But since Popup is not a part of visual-tree, the popup gets created again when visiting the page next time. how can I avoid this? the only option I know is to write a static popup in code-behind. But is there any way I can do this in xaml? (or may be in VM)
this is my code in XAML.
<Popup Grid.Row="2" x:Name="popup" IsOpen="{Binding VenueListOpen}">
<ScrollViewer Height="600" Margin="0,0,0,20" Background="#55000000">
<StackPanel Width="{Binding DeviceWidth}">
<ItemsControl ItemsSource="{Binding EventsList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20,0" Background="{Binding BindsDirectlyToSource=True, Converter={StaticResource EventRowBackgroundConverter}}">
<TextBlock Margin="20,5" FontSize="30" Text="Metlife stadium" TextWrapping="Wrap"/>
<TextBlock Margin="20,5" Foreground="SkyBlue" Text="www.metlifestadium.com" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</Popup>
How about setting its Visible property to false or true when you enter the page?
I have found a solution to this. May be there are better solution but this works for me:
in code behind, detach the binding by setting it to null. So whenever you move away the current popup will become orphan, and when u visit the page again, navigation will create new page as well as new popup up. but this time only new popup will appear, because the older popup is not in bound with datacontext so binding for IsOpen will not affect any older instance of that popup.
I would like to create a popup in wpf that behaves as windows form. I have manage to close the popup using [x] when it displays. I am stuck on how I can add functional minimize and maximize buttons feature.
here is how i achieved the first step: close button:
How to place close [x] in WPF popup
<Popup Name="myPopup" IsOpen="True">
<StackPanel>
<Label Background="AliceBlue" Foreground="Blue" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" MouseDown="mouse_DownHandled">
x
</Label>
<Label Name="myLabel" Content="This is a popup!" Background="AliceBlue" Foreground="Blue"/>
</StackPanel>
</Popup>
the mouse_DownHandled event closes the popup by setting isOpen=false
Any ideas?Thanks.
I see what you want. I think what you want is not a Popup Control but actually a WPF Window with a special style set in it.
Use the WindowStyle property to achieve this.
Use
<Window Name="myPopup" WindowStyle="SingleBorderWindow">
<StackPanel>
<Label Name="myLabel" Content="This is a popup!" Background="AliceBlue" Foreground="Blue"/>
</StackPanel>
</Window>
If you want to show this from the code, you can create create an instance of the view and call
window.Show()
Your window should look like this