Have a clickable button on top of a combobox in WPF - c#

I can get a button to appear and be clickable in the drop down list of a combo box, but I cannot get the selected combo box item (the drop list is closed) to have the button be clickable. It always skips the button click and just opens the drop down list. I basically want the Button_Click event handler that I setup to be called once it is clicked. Here is my sample combo box that shows the button but is not clickable once it is in the selected item:
<ComboBox x:Name="MyCombo" Width="200" Height="30" ItemsSource="{Binding ListCombo}">
<ComboBox.Resources>
<DataTemplate DataType="{x:Type local:ComboItemClass}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=SampleText}" Width="120" />
<Button Width="20" Content="..." Click="Button_Click"/>
</StackPanel>
</DataTemplate>
</ComboBox.Resources>
</ComboBox>

Putting buttons inside comboboxes is one of those really cool features that we now CAN do in WPF that we (me included) get really excited about, before we stop to consider if we SHOULD do this.
Having a button inside a combobox makes it very easy to confuse the heck out of your user. I would recommend that you bind the data from your comobox listitems to a button outside of the combobox, where your user will expect it. That way, you can still change the end result of the button being pressed by selecting an item from the combobox.
EDIT:
If you have the space for it, a listbox would work perfectly for what you want to do.
<ListBox>
<ListBoxItem>
<StackPanel Height="34" HorizontalAlignment="Left" Margin="12,16,0,0" VerticalAlignment="Top" Width="430" Orientation="Horizontal">
<Button Content="Edit" />
<Button Content="Delete" />
<TextBlock Text="Port Information here" VerticalAlignment="Center" Margin="20,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Height="34" HorizontalAlignment="Left" Margin="12,16,0,0" VerticalAlignment="Top" Width="430" Orientation="Horizontal">
<Button Content="Edit" />
<Button Content="Delete" />
<TextBlock Text="Port Information here" VerticalAlignment="Center" Margin="20,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Height="34" HorizontalAlignment="Left" Margin="12,16,0,0" VerticalAlignment="Top" Width="430" Orientation="Horizontal">
<Button Content="Edit" />
<Button Content="Delete" />
<TextBlock Text="Port Information here" VerticalAlignment="Center" Margin="20,0" />
</StackPanel>
</ListBoxItem>

Related

How do you add a flyout message to a WPF button using XAML

Below is my xaml for a button I would like to have a message fly out from:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
</Button>
I would like to have a small single line of text fly out when a mouse pointer moves over a button in WPF. For example, if you are using the Chrome browser a small line of text fly's out when you move your cursor over the back arrow at the top which says "click to go back". How can I have a message like that pop out when I move a mouse pointer over a WPF button? The message I want displayed for my button would be "Removes all text from the results window."
Thanks in advance.
---- UPDATE FEB 9, 2019 ------
Thanks to the comment from the.doc I updated my code to the following which now gives me the result I was looking for:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold">Removes all text from the result window</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
Below is the solution to the problem I had by using the Button.ToolTip feature which The.Doc suggested:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold">Removes all text from the result window</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>

ListBoxItem results unclickable while ProgressBar performs steps

I have a DataTemplate which describes the Items of a ListBox in XAML. Into each Item I have four things:
1) a progress bar
2) three buttons
I noticed that when the progress bar is advancing, the buttons result to be unclickable, why?
There is my XAML code referring to the abovementioned ListBox:
<ListBox Grid.Column="1" Name="TransfersList" Margin="30,10,-0.444,34.889" ItemsSource="{Binding DataTx}"
SelectionChanged="TransfersList_SelectionChanged" Grid.Row="1" Grid.ColumnSpan="3"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ProgressBar Height="20" Minimum="0" Maximum="{Binding NChunks}" Name="gasparino_il_carbonaro"
Value="{Binding PbStatus}" Foreground="{Binding Color}"
ToolTip="{Binding TooltipInfo}" />
<Button Content="Delete all" Grid.Column="3" Margin="0,0,0,0" Grid.Row="1" Height="20"
VerticalAlignment="Center" HorizontalAlignment="Left" Width="75" Background="White"
Click="DeleteAllTransfersClick" />
<Button Content="Stop all" Grid.Column="3" Margin="0,0,0,0" Grid.Row="1" Height="20"
VerticalAlignment="Center" HorizontalAlignment="Center" Width="75" Background="White"
Click="StopAllTransfersClick" />
<Button Content="Resume all" Grid.Column="3" Margin="0,0,0,0" Grid.Row="1" Height="20"
VerticalAlignment="Center" HorizontalAlignment="Right" Width="75" Background="White"
Click="ResumeAllTransfersClick" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It happens in Single threaded application. To use multi threaded concept, show progress bar using using event & delegates.

Enable/Disable Button When Listbox is Selected

I have a ListBox
<ListBox Background="WhiteSmoke"
Name="LstComponents"
ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ComponentID}" />
<TextBlock Text=" - " />
<TextBlock Text="{Binding ComponentName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and a few buttons
<Button Content="Add New Components"
Name="BtnAdd"
Margin="5"
Click="BtnAdd_Click" />
<Button Content="Update Components"
Name="BtnUpdate"
Grid.Column="1"
Margin="5"
Click="BtnUpdate_Click" />
<Button Content="Delete Components"
Grid.Column="2"
Name="BtnDelete"
Margin="5"
Click="BtnDelete_Click" />
Now I wanted the Update and Delete button to be disabled when it is loaded whereas it should enable if the list item in the ListBox is selected.
I don't want to write a code behind for it. Plz Suggest? How would i be able to accomplish this task in XAML
You can use
IsEnabled="{Binding ElementName=ListBoxName, Path=SelectedItems.Count}"
to make it work.

Event Handler on DataTemplate in App.xaml Windows Phone 8.1

I have a ListView populated by items having a different style thanks to an ItemTemplateSelector. The DataTemplates are placed in app.xaml as ressources like the following:
<DataTemplate x:Key="FollowingOuterTemplate">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" />
<MenuFlyoutItem Text="Refresh" />
<MenuFlyoutItem Text="Share" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<StackPanel Orientation="Vertical" Width="282">
<TextBlock Grid.Row="0" FontSize="33" Text="{Binding Pseudo}" Foreground="Gray" Height="46" Margin="0,0,-0.333,0"/>
<TextBlock Grid.Row="1" FontSize="20" Text="{Binding NomPrenom}" Foreground="#5bc5eb" Height="27" Margin="0,0,-0.333,0"/>
<TextBlock Grid.Row="2" FontSize="20" Text="Appuyez pour ne plus suivre" Foreground="#BCC6CC" Height="27" Margin="0,0,-0.333,0"/>
</StackPanel>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Width="113">
<Image Name="StatutContact" Height="43" Source="/Ressources/Images/checkedTests2.png" Stretch="Fill" Margin="0,20,0,0" Width="44" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
So now I would like to show the FlyoutBase attached menu when I'm holding an Item. But as the DataTemplate is in app.xaml and it's forbidden to add event handler there (app.xaml.cs is not having any constructor as it's not constructing pages). I would like to add a Holding event handler to the StackPanel that the FyloutBase Menu is attached to.
Anyone knows how to achieve that ?
Not sure if you really just cannot do that, but Shawn Kendrot proposed a port of the Silverlight Toolkit's ContextMenuService that gets around your problem on his Blog.

how to acess on controls inside of stackpanel in windows phone7?

i design page bellow code.
<ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1" x:Name="svProduct">
<StackPanel>
<ItemsControl x:Name="lstSearchResult" ItemsSource="{Binding Path=PIProductList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="480" Style="{Binding CellStyle}" Orientation="Horizontal" VerticalAlignment="Center" Height="50" >
<TextBlock Foreground="Black" FontSize="20" Width="320" FontFamily="Tahoma" Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="btnBookmark" Click="btnBookmark_Click" Tag="{Binding}" Background="Transparent">
<Button.Content>
<Image Source="/Images/bookmarks_red.png" Width="33" Height="30" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
<Button BorderThickness="0" x:Name="btnSubmit" Click="btnSubmit_Click" Background="Transparent" Tag="{Binding}" >
<Button.Content>
<Image Name="ram" Source="/Images/blue_arrow.png" Width="40" Height="40" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
i want to access for btnBookmark visuble false .
can't access btnBookmark.Visibility=Visibility.collapsed
how to do this?
please help to me...........
The best way I know to do this is to create a Visiblity property on your item ViewModel (the one that is bound to each row in your ItemsControl) and toggle that value based on the changes to each item, presumably via the toggle button in each row. I don't know of a good way to "loop and look" for these internal controls. You're much better off using the existing data binding infrastructure to manage this for you.

Categories

Resources