I'm trying to flip the arrow to point to the other direction in my flyout without changing the Position to left.
Right now this is how I'm creating my flyout
<Controls:Flyout Name="New_Flyout"
Header="Select Account Type"
IsOpen="False"
Theme="Light"
Position="Right"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left"
Margin="0,0,0,0"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Controls:MetroWindow}, Path=ActualWidth}"
AnimateOpacity="True"
AnimateOnPositionChange="True"
>
Add a new Trigger to the default HeaderTemplate:
<DataTemplate x:Key="HeaderTemplate1"
x:Shared="False">
<DockPanel x:Name="dpHeader"
Margin="10,25,10,10"
VerticalAlignment="Center"
LastChildFill="True">
<Button x:Name="nav"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}, Path=CloseCommand, Mode=OneWay}"
DockPanel.Dock="Left"
Style="{DynamicResource MetroCircleButtonStyle}"
Visibility="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:Flyout}}, Path=CloseButtonVisibility}"
Height="40"
Width="40"
FontFamily="Segoe UI Symbol"
Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}, Path=Foreground}"
FontSize="16"
VerticalAlignment="Bottom">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<Actions:SetFlyoutOpenAction TargetObject="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
Value="False" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Rectangle Width="20"
Height="15"
Fill="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Canvas Width="48"
Height="48"
Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0"
UseLayoutRounding="False">
<Path Width="25"
Height="18"
Canvas.Left="12"
Canvas.Top="15"
Stretch="Fill"
Fill="Black"
Data="F1 M 12,22L 12,26L 28.25,26L 21,33L 27.5,33L 37,24L 27.5,15L 21,15L 28.25,22L 12,22 Z " />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Button>
<TextBlock Text="{Binding}"
x:Name="PART_BackButton"
Visibility="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:Flyout}}, Path=TitleVisibility}"
FontSize="{StaticResource FlyoutHeaderFontSize}"
Margin="15,0,0,0"
VerticalAlignment="Center" />
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
Value="Right">
<Setter TargetName="nav"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="45" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
Value="Left">
<Setter TargetName="nav"
Property="DockPanel.Dock"
Value="Right" />
<Setter TargetName="PART_BackButton"
Property="TextAlignment"
Value="Right" />
<Setter TargetName="PART_BackButton"
Property="Margin"
Value="0,0,15,0" />
<Setter TargetName="nav"
Property="LayoutTransform">
<Setter.Value>
<ScaleTransform ScaleX="-1" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
Value="Top">
<Setter TargetName="dpHeader"
Property="Margin"
Value="10" />
<Setter TargetName="nav"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
Value="Bottom">
<Setter TargetName="dpHeader"
Property="Margin"
Value="10" />
<Setter TargetName="nav"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="90" />
</Setter.Value>
</Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
And then apply it to your Flyout:
<Controls:Flyout Name="New_Flyout"
HeaderTemplate="{StaticResource HeaderTemplate1}"
Header="Select Account Type"
IsOpen="False"
Theme="Dark"
Position="Right"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left"
Margin="0,0,0,0"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Controls:MetroWindow}, Path=ActualWidth}"
AnimateOnPositionChange="True">
I used 45 degrees just to make it clear, but for your purposes you want to use 180:
Related
I'm hoping to remove the "AutoHide" capability from my usage of AvalonDock. I modeled my solution after this example here: http://lostindetails.com/blog/post/AvalonDock-2.0-with-MVVM
My current thought process is that if I can remove the option from both the tab (the symbol next to the "closing X") and the context menu, users won't be able to perform a hide operation. If there is another way to accomplish the removal of the hide operation, that would work as well.
Removing Hide From Tab and Context Menu
In the example, he is able to set the CanClose property on a LayoutItem, thus affecting any item that is displayed due to being inside the DocumentsSource. I would like to do the same thing, but for CanHide and CanAutoHide and have it affect Anchorables inside my AnchorablesSource.
Edit: I have added the line:
<Setter Property="dockctrl:LayoutAnchorableItem.CanHide" Value="False" />
which now gets me half way there. This line removes the hide ability, however it does not remove the "AutoHide" pin symbol (or the context menu option). I know the CanAutoHide property does exist, I'm just not sure how to set it. Here are the relevant docs from Xceed
Current Solution
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<dock:DockingManager x:Name="AvalonDockDockingManager" Grid.Row="1"
AllowMixedOrientation="True"
DataContext="{Binding DockManagerViewModel}"
DocumentsSource="{Binding Documents}"
AnchorablesSource="{Binding Anchorables}" >
<dock:DockingManager.Resources>
</dock:DockingManager.Resources>
<dock:DockingManager.LayoutItemContainerStyle>
<Style TargetType="{x:Type dockctrl:LayoutItem}" >
<Setter Property="Title" Value="{Binding Model.Title}" />
<Setter Property="CloseCommand" Value="{Binding Model.CloseCommand}" />
<Setter Property="CanClose" Value="{Binding Model.CanClose}" />
<Setter Property="dockctrl:LayoutAnchorableItem.CanHide" Value="False" />
</Style>
</dock:DockingManager.LayoutItemContainerStyle>
<dock:DockingManager.AnchorablePaneControlStyle>
<Style TargetType="{x:Type dockctrl:LayoutAnchorableItem}" >
<Setter Property="CanHide" Value="False" />
</Style>
</dock:DockingManager.AnchorablePaneControlStyle>
</dock:DockingManager>
</Grid>
You will have to re-style some elements of AvalonDock to get rid of the AutoHide pin. Below is a sample XAML of the AchorablePaneTitle style taken from the Generic.xaml.
As alternative solution: You can also let the Pin dissappear by setting CanAutoHide="False" and CanHide="False" in this sample application.
The changed XAML looks like this
<avalonDock:LayoutAnchorable x:Name="WinFormsWindow"
ContentId="WinFormsWindow"
Title="WinForms Window"
ToolTip="My WinForms Tool"
CanAutoHide="False"
CanHide="False"
CanClose="False" >
<winformsIntegration:WindowsFormsHost x:Name="winFormsHost" Background="White"/>
</avalonDock:LayoutAnchorable>
This is the screenshot taken from the linked sample application above. Note the missing pin on the Winforms Window.
Override the AnchorablePaneTitle style to get rid of the pin defined in PART_AutoHidePin (eg.: Set Visibility = "Collapsed" on it).
<Style TargetType="avalonDockControls:AnchorablePaneTitle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<avalonDockControls:DropDownControlArea DropDownContextMenu="{Binding Model.Root.Manager.AnchorableContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
DropDownContextMenuDataContext="{Binding Path=LayoutItem, RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter Content="{Binding Model, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding Model.Root.Manager.AnchorableTitleTemplate, RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplateSelector="{Binding Model.Root.Manager.AnchorableTitleTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" />
</avalonDockControls:DropDownControlArea>
<avalonDockControls:DropDownButton Style="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}"
Focusable="False"
Grid.Column="1"
DropDownContextMenu="{Binding Model.Root.Manager.AnchorableContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
DropDownContextMenuDataContext="{Binding Path=LayoutItem, RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Anchorable_CxMenu_Hint}">
<Border Background="White">
<Image Source="/Xceed.Wpf.AvalonDock;component/Themes/Generic/Images/PinMenu.png">
</Image>
</Border>
</avalonDockControls:DropDownButton>
<Button x:Name="PART_AutoHidePin"
Grid.Column="2"
Focusable="False"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Visibility="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
Command="{Binding Path=LayoutItem.AutoHideCommand, RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Anchorable_BtnAutoHide_Hint}">
<Border Background="White">
<Image Source="/Xceed.Wpf.AvalonDock;component/Themes/Generic/Images/PinAutoHide.png">
</Image>
</Border>
</Button>
<Button x:Name="PART_HidePin"
Grid.Column="3"
Focusable="False"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Visibility="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"
Command="{Binding Path=LayoutItem.HideCommand, RelativeSource={RelativeSource TemplatedParent}}"
ToolTip="{x:Static avalonDockProperties:Resources.Anchorable_BtnClose_Hint}">
<Border Background="White">
<Image Source="/Xceed.Wpf.AvalonDock;component/Themes/Generic/Images/PinClose.png">
</Image>
</Border>
</Button>
</Grid>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Model.IsAutoHidden, RelativeSource={RelativeSource Mode=Self}}"
Value="True">
<Setter Property="LayoutTransform"
TargetName="PART_AutoHidePin">
<Setter.Value>
<RotateTransform Angle="90" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Model.CanClose, RelativeSource={RelativeSource Mode=Self}}"
Value="True">
<Setter Property="Command"
TargetName="PART_HidePin"
Value="{Binding Path=LayoutItem.CloseCommand, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="ToolTip"
TargetName="PART_HidePin"
Value="{x:Static avalonDockProperties:Resources.Document_Close}" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've got a ComboBox that looks like this:
I don't want the value of ... to change when one of the items is selected.
I've tried a ton of different solutions - various bindings on SelectedIndex, SelectedValue, SelectionChanged, playing with IsEditable, IsReadonly, IsHitTestVisible, making ... an actual item, making it placeholder text, etc, etc, etc.
Every time I select an item, the ... updates with the child value. I want it to stay the same.
How can I prevent the combobox from automatically updating the text on selection, but still have it able to select a choice?
If it helps, here's the custom template for that image:
<ResourceDictionary
x:Class="ComboBoxA"
xmlns:local="clr-namespace:MyTemplates"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTemplate x:Key="ComboBoxA" TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton
ClickMode="Press"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
Name="ToggleButton"
>
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="36" />
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="0"
BorderThickness="1" />
<Border
Grid.Column="0"
CornerRadius="0"
Margin="1"
Background="Transparent"
BorderThickness="0"
/>
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="#707070"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Collapsed"
Data="M0,0 L8,0 L4,4 z"
/>
<TextBlock
Margin="4,6"
Foreground="#282828"
Grid.Column="0"
Text="{Binding Path=(local:ComboBoxAHelper.Placeholder), RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Arrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="Border" Property="BorderBrush" Value="#d9d9d9"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Arrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="Border" Property="BorderBrush" Value="#d9d9d9"/>
</Trigger>
<DataTrigger Binding="{Binding Path=(local:ComboBoxAHelper.ShowBorders), RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter TargetName="Arrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="Border" Property="BorderBrush" Value="#d9d9d9"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ContentPresenter
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
HorizontalAlignment="Left"
IsHitTestVisible="False"
Margin="3,3,23,3"
Name="ContentSite"
VerticalAlignment="Center"
/>
<Popup
AllowsTransparency="True"
Focusable="False"
IsOpen="{TemplateBinding IsDropDownOpen}"
Name="Popup"
PopupAnimation="Slide"
>
<Grid Name="DropDown"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
MinWidth="{TemplateBinding ActualWidth}"
SnapsToDevicePixels="True"
>
<Border
Background="White"
BorderBrush="#d9d9d9"
BorderThickness="1"
x:Name="DropDownBorder"
/>
<ScrollViewer Margin="4,6" SnapsToDevicePixels="True">
<StackPanel
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained"
/>
</ScrollViewer>
</Grid>
<Popup.Style>
<Style TargetType="Popup">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=(local:ComboBoxAHelper.RightAlignPopup), RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter Property="Placement" Value="Left" />
<Setter Property="VerticalOffset" Value="{Binding ActualHeight, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="HorizontalOffset" Value="{Binding ActualWidth, RelativeSource={RelativeSource TemplatedParent}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Popup.Style>
</Popup>
</Grid>
</ControlTemplate>
<Style x:Key="ComboBoxAItem" TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="#282828" />
<Setter Property="Padding" Value="4" />
</Style>
</ResourceDictionary>
...and its corresponding XAML:
<ComboBox
templates:ComboBoxAHelper.Placeholder="..."
templates:ComboBoxAHelper.RightAlignPopup="True"
templates:ComboBoxAHelper.ShowBorders="True"
HorizontalAlignment="Right"
IsReadOnly="True"
IsEditable="False"
SelectedValue="x:Null"
Template="{StaticResource ComboBoxA}"
>
<ComboBoxItem>
<TextBlock Style="{StaticResource ComboBoxAItem}">Close</TextBlock>
</ComboBoxItem>
<ComboBoxItem>
<TextBlock Style="{StaticResource ComboBoxAItem}">Delete</TextBlock>
</ComboBoxItem>
</ComboBox>
The trick was to remove
Content="{TemplateBinding SelectionBoxItem}"
from the template (both in general and also the code posted in the question).
Thanks to #shadow32's answer to my separate question https://stackoverflow.com/a/50805408/385273.
I have a WPF TreeView that I customized visually looking like this:
I defined an EventTrigger to react on clicks:
<TreeView>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<i:InvokeCommandAction Command="{Binding OpenPartListCommand}" CommandParameter="{Binding ElementName=PartsTreeView, Path=SelectedItem}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem" >
<Grid Margin="6,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Name="Bd"
Background="{Binding Background}"
BorderBrush="Black"
BorderThickness="1.2"
CornerRadius="0"
MinHeight="35"
Padding="5"
SnapsToDevicePixels="True"
Margin="{Binding Path=Margin}" >
<Grid>
<Expander Name="Exp" IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
<Expander.Header>
<ContentPresenter ContentSource="Header"
Width="{Binding Path=ActualWidth, ElementName=PartsTreeView, Mode=OneWay, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE-80}" />
</Expander.Header>
<ItemsPresenter />
</Expander>
<ContentPresenter Name="CntPres"
ContentSource="Header"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Collapsed"
Width="{Binding Path=ActualWidth, ElementName=PartsTreeView, Mode=OneWay, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE-80}"
/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.HasItems" Value="false">
<Setter
TargetName="Exp"
Property="Visibility"
Value="Collapsed" />
<Setter
TargetName="CntPres"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TreeViewItem.Name" Value="IsSpecial">
<Setter Property="Background" TargetName="Bd" Value="#FFC3AF"/>
</Trigger>
<Trigger Property="TreeViewItem.Name" Value="IsNotSpecial">
<Setter Property="Background" TargetName="Bd" Value="#8BADC5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="Bd" Value="#FFF0EA"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="Bd" Value="#FFF0EA"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#FFF0EA"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<ItemsPanelTemplate.Resources>
</ItemsPanelTemplate.Resources>
<StackPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>
The problem is that clicking on the root element "Ausführungsvorschrift" only expands the tree but the event is not fired. It fires when clicking on sub elements though and it fires when clicking inside the border. But the header does not fire anything.
Try to add triggers for the Expanded and Collapsed events to the Expander element in the template:
<Expander Name="Exp" IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Expanded">
<i:InvokeCommandAction Command="{Binding DataContext.OpenPartListCommand, RelativeSource={RelativeSource AncestorType=TreeView}}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}}" />
</i:EventTrigger>
<i:EventTrigger EventName="Collapsed">
<i:InvokeCommandAction Command="{Binding DataContext.OpenPartListCommand, RelativeSource={RelativeSource AncestorType=TreeView}}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Expander.Header>
<ContentPresenter ContentSource="Header" />
</Expander.Header>
<ItemsPresenter />
</Expander>
I need a little guidance. I am trying to create your own ToolTip with an arrow. I ran into a problem. If the ToolTip too close to the edge of the screen, so of course change the tooltip positions, but no longer for themselves arrow.
I tried to solve it by this https://stackoverflow.com/questions/18497029/, but without result.
Here my source code.
<Style x:Key="ToolTipArrowStyle" TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="ToolTipService.Placement" Value="Bottom" />
<Setter Property="ToolTipService.ShowDuration" Value="1000"/>
<Setter Property="ToolTipService.InitialShowDelay" Value="7000"/>
<Setter Property="ToolTipService.BetweenShowDelay" Value="2000"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid x:Name="LayoutRoot" d:DesignWidth="260" d:DesignHeight="71" Height="Auto" Width="260">
<StackPanel>
<Path x:Name="ArrowPathTop"
Margin="0"
Width="20" Height="10"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Data="M0,10 L10,0 20,10Z"
Stroke="Black"
Fill="White"
Stretch="None" />
<Border Height="50" Background="White" Margin="5,0" BorderBrush="Black" BorderThickness="1">
<Border.Effect>
<DropShadowEffect BlurRadius="7" ShadowDepth="1" Opacity="0.5" />
</Border.Effect>
<ContentPresenter/>
</Border>
<Path x:Name="ArrowPathBottom"
Visibility="Hidden"
Margin="0"
Width="20" Height="10"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Data="M0,10 L10,0 20,10Z"
Stroke="Black"
Fill="White"
Stretch="None"
RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Placement" Value="Top">
<Setter TargetName="ArrowPathBottom" Property="Visibility" Value="Visible"/>
<Setter TargetName="ArrowPathTop" Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="Placement" Value="Bottom">
<Setter TargetName="ArrowPathBottom" Property="Visibility" Value="Hidden"/>
<Setter TargetName="ArrowPathTop" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Height="40" Style="{StaticResource TransparentButton2}"
Content="Button transparent" VerticalAlignment="Center" HorizontalAlignment="Center" >
<Button.ToolTip>
<ToolTip Style="{DynamicResource ToolTipArrowStyle}">
<ToolTip.HorizontalOffset>
<MultiBinding Converter="{StaticResource CenterToolTipConverter}">
<Binding RelativeSource="{RelativeSource Self}" Path="PlacementTarget.ActualWidth"/>
<Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth"/>
</MultiBinding>
</ToolTip.HorizontalOffset>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="ToolTip text" FontSize="15" Foreground="Red"/>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
Anybody know how to solve this problem? Thanks a lot.
See Figure:
I got this in my view, I need to be able to edit the name of the Skeleton items in the TreeView via right-click -> context menu -> rename. There is a slight problem:
When I use TextBlock it works fine (TextBlock is not editable) but the binding shuts down when I use TextBox. I tried several bindings and ancestor types, to no avail. Not sure if I should switch to TextBox at all.
<UserControl.Resources>
<Image x:Key="visibilityImage" Source="../Resources/visibility.png" Height="16" Width="16" />
<Image x:Key="visibilityOffImage" Source="../Resources/visibilityoff.png" Height="16" Width="16" />
<Style TargetType="{x:Type ToggleButton}" x:Key="visibilityButtonStyle">
<Setter Property="Content" Value="{DynamicResource visibilityImage}" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="{DynamicResource visibilityOffImage}" />
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate DataType="{x:Type commonVM:GyroSuitViewModel}">
<views:GyroSuitView></views:GyroSuitView>
</DataTemplate>
<DataTemplate DataType="{x:Type commonVM:SkeletonViewModel}">
<views:SkeletonView></views:SkeletonView>
</DataTemplate>
</UserControl.Resources>
<Grid Name="Root">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<Label Content="{Binding Title}" Margin="2"/>
<TreeView Name="SkeletonItems" ItemsSource="{Binding Skeletons}" commonExtensions:RightClickTreeViewSelectionExtension.IsEnabled="True">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True"/>
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}"/>
<Setter Property="IsSelected" Value="{Binding IsSelected}"/>
<Style.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="Grid.ColumnSpan" Value="2" />
</Style>
</Style.Resources>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=Records}">
<DockPanel LastChildFill="True">
<ToggleButton Background="Transparent" BorderThickness="0" Width="20" Height="20" IsChecked="{Binding IsVisible, Mode=TwoWay}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding ChangeVisibilityCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding ChangeVisibilityCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Image Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsVisible}" Value="true">
<Setter Property="Source" Value="../Resources/visibility.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsVisible}" Value="false">
<Setter Property="Source" Value="../Resources/visibilityoff.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ToggleButton>
<ToggleButton Visibility="{Binding RecordingButtonVisibility}" Background="Transparent" BorderThickness="0" Width="20" Height="20" IsChecked="{Binding IsRecording, Mode=TwoWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding RecordCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding RecordCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Image Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsRecording}" Value="true">
<Setter Property="Source" Value="../Resources/stop.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsRecording}" Value="false">
<Setter Property="Source" Value="../Resources/record.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ToggleButton>
<Button Visibility="{Binding DeleteButtonVisibility}" Name="DeleteButton" Height="20" BorderThickness="0" Command="{Binding DeleteCommand}" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Image Source="../Resources/delete.png" Stretch="Fill"/>
</Button>
<xctk:ColorPicker SelectedColor="{Binding SkeletonColor, Converter={converter:DrawingColorToMediaColorConverter}}" BorderThickness="0" Margin="2" StandardColors="{Binding ElementName=Root, Path=DataContext.AvailableSkeletonColors}" Background="Transparent" Width="20" ShowAdvancedButton="False" ShowAvailableColors="False" ShowDropDownButton="False" ShowStandardColors="True" StandardColorsHeader="" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Tag="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext}">
<TextBlock.ContextMenu>
<ContextMenu DataContext="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}" Visibility="{Binding Path=ContextMenuVisibility}">
<MenuItem Header="Rename"/>
<MenuItem Header="Open Containing Folder" Command="{Binding OpenFolderCommand}"/>
</ContextMenu>
</TextBlock.ContextMenu>
</TextBlock>
</DockPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
<ContentPresenter Name="details" Content="{Binding SelectedItem, ElementName=SkeletonItems}" />
</StackPanel>
</ScrollViewer>
</Grid>
When I use the TextBox these are the errors in the output:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=Root'. BindingExpression:Path=DataContext.AvailableSkeletonColors; DataItem=null; target element is 'ColorPicker' (Name=''); target property is 'StandardColors' (type 'ObservableCollection`1')
and
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.UserControl', AncestorLevel='1''. BindingExpression:Path=DataContext; DataItem=null; target element is 'TextBox' (Name=''); target property is 'Tag' (type 'Object')
Thanks for every input!