I'm trying to add MenuItems into a DropDropButton control and control the visibility
of the buttons using the IsSelected property of TabItem, however the visibility
of the MenuItems do not change. I applied the same binding on a standard
button it the visibility works as expected. Does anyone know what is going on here?
Here is a sample of what I'm trying to do:
<StackPanel>
<Button Content="Hi" Visibility="{Binding ElementName=tabItem1, Path=IsSelected, Converter={StaticResource VisibilityConverter}}"/>
<toolkitEx:DropDownButton Content="Button 1">
<toolkitEx:DropDownButton.DropDownContent>
<StackPanel>
<MenuItem Header="Visibile for tabItem1" Visibility="{Binding ElementName=tabItem1, Path=IsSelected, Converter={StaticResource VisibilityConverter}}"/>
<MenuItem Header="Visibile for tabItem2" Visibility="{Binding ElementName=tabItem2, Path=IsSelected, Converter={StaticResource VisibilityConverter}}"/>
</StackPanel>
</toolkitEx:DropDownButton.DropDownContent>
</toolkitEx:DropDownButton>
<TabControl HorizontalAlignment="Stretch" Name="tabControl1" VerticalAlignment="Stretch" >
<TabItem Header="tabItem1" x:Name="tabItem1">
<Grid />
</TabItem>
<TabItem Header="tabItem2" x:Name="tabItem2">
<Grid />
</TabItem>
</TabControl>
</StackPanel>
Thanks!
Related
I need to databind two TextBlocks to the Window.Title property. The first one works via:
RelativeSource FindAncestor, AncestorType=Window}"
But the second one does not (it's deeply nested within a button ToolTip).
How can I change the second one to make it also display the Title of the Window?
<Window ...>
<Border ...>
<Grid ...>
<Grid ...>
<!-- TEXTBLOCK BELOW WORKS -->
<TextBlock Grid.Column="2" Text="{Binding Title, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="White" FontSize="18px" FontStretch="UltraExpanded" />
<Button Grid.Column="3" HorizontalAlignment="Right" VerticalAlignment="Stretch"
Background="Transparent" BorderBrush="Transparent" Foreground="Transparent"
ToolTipService.InitialShowDelay="0" ToolTipService.BetweenShowDelay="0" ToolTipService.ShowDuration="60000">
<Button.ToolTip>
<ToolTip x:Name="helpButtonTooltip" Width="240" ToolTipService.InitialShowDelay="0">
<!-- TEXTBLOCK BELOW DOES NOT WORK; HOW CAN I MAKE IT WORK? -->
<TextBlock Text="{Binding Title, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="White" FontSize="18px" FontStretch="UltraExpanded" />
The tool tip is displayed in a popup and is not part of the same visual tree as the button or your window. Consequently, RelativeSource and ElementName bindings do not work.
What you can do is bind the window title to the Tag property of your button and then bind the Text of the tool tip TextBlock to the Tag property of the PlacementTarget (which is the button).
<Button Tag="{Binding Title, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}">
<Button.ToolTip>
<ToolTip>
<TextBlock Text="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}"/>
</ToolTip>
</Button.ToolTip>
</Button>
On click of toggle button I want to show a context menu. As I want to change the visual appearance of context menu, I have created controltemplate and data template as below,
<TabItem>
<TabItem.HeaderTemplate>
<DataTemplate>
<ContextMenu ItemSource="{Binding Collection}">
<ContextMenu.Template>
<ControlTemplate>
<Grid Margin="10">
<ListBox Width="150" Height="70"/>
</Grid>
</ControlTemplate>
<ContextMenu.ItemTemplate>
<DataTemplate>
<StackPanel>
<CheckBox Content="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu.Template>
</ContextMenu>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
Post this change I could see only a LisBox being shown clicking upon toggle button. I am not able to visualize the Data template that I had set (Checkbox). Data binding is also not working. Not able to figure out what could be the issue.
You should bind the ItemsSource property of the ListBox to the ItemsSource of the ContextMenu and define an ItemTemplate for the ListBox:
<ContextMenu ItemsSource="{Binding Collection}">
<ContextMenu.Template>
<ControlTemplate TargetType="ContextMenu">
<Grid Margin="10">
<ListBox ItemsSource="{TemplateBinding ItemsSource}" Width="150" Height="70">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ControlTemplate>
</ContextMenu.Template>
</ContextMenu>
In a listbox of items, one item can be designated as the primary item. In the template, I have a button bound to a parameterized command (the specific item in the collection is the parameter passed to the command in the datacontext) that is visible only if the item is not currently the primary item. If the item IS the primary item, I want to display a static image. Since I can't bind the image to the command to witch I am binding the button, I figured I could bind the Visibility property of the image to the "inverse" of the Visibility property of the button. (i.e. when the button is visible, the image is hidden and vice versa.) But I can't figure out how to do this. The button is a sibling of the image within a grid within the template. Here's my template...
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=FormattedNumber}" Style="{StaticResource FieldDataTextBlock}" FontWeight="Bold" />
<!-- How can I make this image aware of the following button's state? -->
<Image Grid.Column="2" Source="/Resources/Star.Pressed.png" Visibility="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path={}}" Width="20" Height="20" />
<Button Grid.Column="2" x:Name="btnMakePrimary" Style="{StaticResource StarButton}" Command="{Binding ElementName=lstPhoneNumbers, Path=DataContext.MakePrimaryPhoneNumberCommand}" CommandParameter="{Binding}" ToolTip="Set as display number." Visibility="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BoolVisibility}}" />
<Button Grid.Column="4" Style="{StaticResource DetailsButton}" Command="{Binding ElementName=lstPhoneNumbers, Path=DataContext.ViewPhoneNumberCommand}" CommandParameter="{Binding}" />
<Button Grid.Column="6" Style="{StaticResource DeleteButton}" Command="{Binding ElementName=lstPhoneNumbers, Path=DataContext.DeletePhoneNumberCommand}" CommandParameter="{Binding}" />
</Grid>
<Grid >
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=PhoneTypeString}" Style="{StaticResource FieldDataTextBlock}" />
<TextBlock Grid.Column="2" Text="(notes)" Foreground="Blue" ToolTip="{Binding Path=PhoneNumberNote}" Visibility="{Binding Path=HasNote, Converter={StaticResource BoolVisibility}}" />
</Grid>
</StackPanel>
</DataTemplate>
Either that, or is there a way to bind the image to a method in the parent datacontext that takes a parameter?
Thanks.
J
Never mind... I was able to make it happen via the ElementName attribute of the binding and fixing an issue with the included image resource which was messing with my visuals:
<Button Grid.Column="2" Name="btnMakePrimary" Style="{StaticResource StarButton}" Command="{Binding ElementName=lstPhoneNumbers, Path=DataContext.MakePrimaryPhoneNumberCommand}" CommandParameter="{Binding}" ToolTip="Set as display number." Visibility="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BoolVisibility}}" />
<Image Grid.Column="2" Source="/Resources/Star.Pressed.png" Visibility="{Binding ElementName=btnMakePrimary, Path=IsEnabled, Converter={StaticResource BoolVisibilityReverse}}" Width="20" Height="20" />
I have tabItem which contains one CheckBox.Tab inside I am binding one ListBox. based on check box checked status I need to control visibility of ListBox. I binded IsChecked property to Visiblity property of ListBox by using Boolean to Visibility converter.But It is not changing the status of Listbox.
How do I get the control status?
Here I attached my code.
<TabItem Header="Trigger">
<TabItem.HeaderTemplate>
<DataTemplate>
<DockPanel>
<CheckBox x:Name="ui_chbTrigger" IsChecked="{Binding SelectedUiSeries.UiTriggerParameters.HasEcgPulsingConfig, Mode=TwoWay}"/>
<Label Content="Trigger" HorizontalAlignment="Center" FontSize="18" FontWeight="Bold"/>
</DockPanel>
</DataTemplate>
</TabItem.HeaderTemplate>
<Grid >
<ListBox Grid.Row="1" Style="{StaticResource S_ListBoxParameterScan}"
ItemContainerStyle="{StaticResource S_ListBoxItemScanParameter}"
Visibility="{Binding Path=IsChecked, Converter={StaticResource BooleanToVisiblityConverter}, ElementName=ui_chbTrigger}">
<ListBoxItem>
<util:HeaderComboBox Style="{DynamicResource S_HeaderComboBoxParameter}" Header="Trigger Type"
ItemsSource="{helpers:EnumBindingHelper {x:Type commonDefs:TriggerType}}"
SelectedItem="{Binding SelectedUiSeries.UiTriggerParameters.TriggerType,Mode=TwoWay}"/>
</ListBoxItem>
</ListBox>
</Grid >
</TabItem>
How can you reference control from TEMPLATE(your checkbox is in HeaderTemplate)
You can change your code as below
<TabControl>
<TabItem>
<TabItem.Header>
<DockPanel>
<CheckBox x:Name="ui_chbTrigger"/>
</DockPanel>
</TabItem.Header>
<Grid >
<ListBox Visibility="{Binding Path=IsChecked, Converter={StaticResource BooleanToVisiblityConverter}, ElementName=ui_chbTrigger}">
<ListBoxItem>
<TextBlock>1</TextBlock>
</ListBoxItem>
<ListBoxItem>
<TextBlock>2</TextBlock>
</ListBoxItem>
</ListBox>
</Grid >
</TabItem>
</TabControl>
Feel free to do the further changes as you need.
Your CheckBox is already bound to SelectedUiSeries.UiTriggerParameters.HasEcgPulsingConfig.
Instead of trying to do ElementName-based Binding, simply bind the other UI element to the same property in the ViewModel:
<ListBox Visibility="{Binding Path=SelectedUiSeries.UiTriggerParameters.HasEcgPulsingConfig,
Converter={StaticResource BooleanToVisiblityConverter}}"/>
I want to put a command on a ListBoxItem. The ListBoxItem use a DataTemplate composed of a StackPanel (containing an Image and a TextBlock, both using Binding). I want that the doubleclick on that ListBoxItem fire the command.
I have tried this :
<DataTemplate>
<StackPanel>
<StackPanel.Resources>
<CommonUI:CommandReference x:Key="DoubleClickCommand" Command="{Binding Path=DefaultCommand}" />
</StackPanel.Resources>
<StackPanel.InputBindings>
<MouseBinding Gesture="LeftDoubleClick" Command="{StaticResource DoubleClickCommand}" />
</StackPanel.InputBindings>
<Image Source="{Binding Path=Thumbnail, IsAsync=True}" IsHitTestVisible="False"/>
<TextBlock Text="{Binding Path=Name}" IsHitTestVisible="False">
</StackPanel>
</DataTemplate>
I have also tried to put the Command Resources on a StackPanel containing this StackPanel, without any change.
I am certain of my binding because when I put the InputBindings part on the TextBlock, it works.
Thanks
Try handling the event in the ListBox instead of the StackPanel:
<ListBox>
<ListBox.Resources>
<CommonUI:CommandReference x:Key="DoubleClickCommand" Command="{Binding Path=DefaultCommand}" />
</ListBox.Resources>
<ListBox.InputBindings>
<MouseBinding Gesture="LeftDoubleClick" Command="{StaticResource DoubleClickCommand}" />
</ListBox.InputBindings>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Path=Thumbnail, IsAsync=True}" />
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</ListBox>
My code finally looks like this :
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel.Resources>
<CommonUI:CommandReference x:Key="DoubleClickCommand" Command="{Binding Path=DefaultCommand}" />
</StackPanel.Resources>
<StackPanel.InputBindings>
<MouseBinding Gesture="LeftDoubleClick" Command="{StaticResource DoubleClickCommand}" />
</StackPanel.InputBindings>
<Image Source="{Binding Path=Thumbnail, IsAsync=True}" />
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
Thanks anyway, Mr Poulin.