I am designing an application in Silverlight with C# and MVVM. On one of the pages I have an image (as in a visual, not the type Image) which is composed of several Path's. In this case they form a face and I would like the user to be able to select several parts (eyes, nose, ears...). Each of these is a separate Path.
The idea is that the user can select one of these vectors and work with it. I'd like the selected one to change color.
I can write a converted of bool to the selected color, that's not a problem. The problem is adding selection logic.
My idea was wrapping it in a ListBox, editing the ItemTemplate to include the Path but this position edthe paths incorrectly. Even after applying margins and the like I couldn't get it properly.
Does anyone have any experience or guidance on this?
Thanks in advance!
ANSWER:
1) Change the ItemsPanel template to your container:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Width="208"
Height="391" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
2) Set the ItemsSource:
The trick here is that positioning/attached attributes only work on the direct children of the ListBox. In this case I am using Canvas.Top and Canvas.Left. The solution is to wrap each Item in an additional ListBoxItem and apply those attributes on the ListBoxItem. (This will happen by default if you dont anyway).
<ListBox>
<ListBoxItem Canvas.Left="10" Canvas.Top="5">
<Path Data="..." Height="200" Width="200" Fill="Black" />
</ListBoxItem>
</ListBox>
Try setting a MouseLeftButtonDown event handler on the Path's that binds to an command on the ViewModel. Should be able to use the sender parameter in the handler to determine which Path to modify.
For the ListBox approach, did you try modifying the ItemsPanel and using a Canvas?
If I understand correctly you could add a VisualStateGroup for FocusStates with a VisualStateManager like you would see on a standard button to apply a different Fill or Border to the path selected. Essentially you'd be making each path behave as a button control would showing a different visual state based on its focus.
(Changed this example to default checkbox template as an example) I can make an example if you need one.
<Style TargetType="CheckBox" x:Key="DefaultCheckBoxStyle">
<Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource ContentFontSize}"/>
<Setter Property="Background" Value="{StaticResource NormalBrush}"/>
<Setter Property="Foreground" Value="{StaticResource TextContentBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Padding" Value="4,1,0,0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Value="{StaticResource NormalBorderBrush}" Property="BorderBrush"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" GeneratedDuration="0:0:0.01" To="MouseOver">
<VisualTransition.GeneratedEasingFunction>
<ExponentialEase EasingMode="EaseIn" Exponent="7"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition From="MouseOver" GeneratedDuration="0:0:0.1" To="Normal">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MouseOverRectangleFill" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1.05"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1.05"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CheckIcon">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CheckedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.6"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="IndeterminateIcon">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="IndeterminateRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.6"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentFocusVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="21"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Margin="5,0,0,0">
<Grid Width="16" Height="16">
<Rectangle x:Name="Background" Fill="{StaticResource BlankBackgroundBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{StaticResource BaseBrush7}" />
<Rectangle x:Name="BackgroundInner" Fill="{TemplateBinding Background}" Margin="1" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}"/>
<Rectangle x:Name="MouseOverRectangleFill" Fill="{StaticResource MouseOverBrush}" StrokeThickness="2" Opacity="0" Margin="3"/>
<Rectangle x:Name="MouseOverRectangle" StrokeThickness="2" Stroke="{StaticResource MouseOverBrush}" Opacity="0"/>
<Border x:Name="PressedBorder" BorderThickness="1" BorderBrush="{StaticResource MouseOverBrush}" Opacity="0" />
<Rectangle x:Name="ContentFocusVisualElement" StrokeThickness="1" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource FocusedBrush}" />
<Rectangle x:Name="DisabledVisualElement" Fill="{StaticResource DisabledBackgroundBrush}" Stroke="{StaticResource DisabledBackgroundBrush}" Opacity="0" RadiusY="1" RadiusX="1" />
<Rectangle x:Name="CheckedRectangle" StrokeThickness="0.5" Stroke="{StaticResource BaseBrush4}" Opacity="0" RadiusX="0.5" RadiusY="0.5"/>
<Path x:Name="CheckIcon" Data="M335.69366,107.11728 L339,111.375 347.09859,99.975309" HorizontalAlignment="Center" Stretch="Fill" Stroke="{StaticResource BaseBrush4}" UseLayoutRounding="False" VerticalAlignment="Center" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Margin="3.5" Opacity="0"/>
<Rectangle x:Name="IndeterminateRectangle" StrokeThickness="2" Stroke="{StaticResource BaseBrush4}" Opacity="0"/>
<Rectangle x:Name="IndeterminateIcon" Fill="{StaticResource BaseBrush3}" Height="2" Opacity="0" Width="6"/>
<Border x:Name="ValidationErrorElement" BorderBrush="{StaticResource ControlsValidationBrush}" BorderThickness="1" CornerRadius="1" Margin="1" ToolTipService.PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
<Path Data="M 1,0 L5,0 A 2,2 90 0 1 7,2 L7,6 z" Fill="{StaticResource ValidationBrush5}" Margin="0,3,0,0"/>
<Path Data="M 0,0 L2,0 L 7,5 L7,7" Fill="{StaticResource BlankBackgroundBrush}" Margin="0,3,0,0"/>
</Grid>
</Border>
</Grid>
</Grid>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Updated my question with the solution, posting again so I can mark it as answered:
ANSWER:
1) Change the ItemsPanel template to your container:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Width="208"
Height="391" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
2) Set the ItemsSource:
The trick here is that positioning/attached attributes only work on the direct children of the ListBox. In this case I am using Canvas.Top and Canvas.Left. The solution is to wrap each Item in an additional ListBoxItem and apply those attributes on the ListBoxItem. (This will happen by default if you dont anyway).
<ListBox>
<ListBoxItem Canvas.Left="10" Canvas.Top="5">
<Path Data="..." Height="200" Width="200" Fill="Black" />
</ListBoxItem>
</ListBox>
Related
I am new to WPF and am struggling to put the pieces of information together. I am trying to create a two level vertical menu like the one here. I have achieved my desired look by overriding the control template of tree view items.
Here is my code.
<BooleanToVisibilityConverter x:Key="BooleanToVisibility" />
<Style x:Key="MenuText" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
<Setter Property="Foreground" Value="#FFA7B1C2"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="MenuIcon" TargetType="TextBlock" BasedOn="{StaticResource BaseIconTextBlockStyle}">
<Setter Property="Foreground" Value="#FFA7B1C2"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="MenuToggleButton" TargetType="ToggleButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Height" Value="46"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="MenuItemNormal" TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="Border" BorderBrush="Transparent" >
<StackPanel Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
<TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text="{TemplateBinding Tag}"/>
<TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF293846"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<StackPanel Grid.Row="1" Visibility="Visible">
<ItemsPresenter />
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="MenuItemParent" TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="MenuButton" Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="Border" BorderBrush="Transparent" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
<TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text="{TemplateBinding Tag}"/>
<TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
</StackPanel>
<TextBlock x:Name="Chevron" Grid.Column="1" Style="{StaticResource MenuIcon}" Text="" Margin="0,0,20,0"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF293846"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Chevron">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
</ColorAnimationUsingKeyFrames>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="Chevron">
<DiscreteStringKeyFrame KeyTime="0" Value=""/>
</StringAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="ChildContainer" Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:00:.500"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="ChildContainer" Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="0" Duration="0:00:.500"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<StackPanel x:Name="ChildContainer" Grid.Row="1" Visibility="{Binding IsChecked, ElementName=MenuButton, Converter={StaticResource BooleanToVisibility}}">
<StackPanel.RenderTransform>
<ScaleTransform ScaleY="0"></ScaleTransform>
</StackPanel.RenderTransform>
<ItemsPresenter />
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="MenuItemChild" TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="Border" BorderBrush="Transparent" Background="#FF293846">
<StackPanel Grid.Column="0" Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
<TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text=""/>
<TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF293846"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<StackPanel Grid.Row="1" Visibility="Visible">
<ItemsPresenter />
</StackPanel>
</Grid>
</ControlTemplate>
And in my Window I declare Treeview like this.
<TreeView x:Name="Menu" Background="Transparent" BorderThickness="0">
<TreeViewItem Tag="" Header="Dashboard" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Home" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Reporting" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Sell" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Products" Template="{StaticResource MenuItemParent}" >
<TreeViewItem Header="Item 2.1" Template="{StaticResource MenuItemChild}" />
<TreeViewItem Header="Item 2.2" Template="{StaticResource MenuItemChild}" />
</TreeViewItem>
<TreeViewItem Tag="" Header="Sales Ledger" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Customers" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Setup" Template="{StaticResource MenuItemNormal}" />
</TreeView>
The problem is that now I realize I should have probably overridden the data
template of the tree view item because I want to bind the tree view to a property on my view model. I cannot figure out if I use data template how do I remove the default ugly expander icon that comes with tree view items
Specifically I have 3 questions
Is overriding control template the right way to achieve what I am
trying to do?
How do I bind my tree view to a view model property
instead of hard coding the items?
How do I track the selected item in my view model?
Thank you in advance!
I've been messing around trying to change this red border around the LoopingSelector in code, and in Blend. I just can't figure out how to do it. Here's a picture so you have an idea of what I'm talking about.
<Grid Grid.Row="1" Margin="12,0,12,0" toolkit:TurnstileFeatherEffect.FeatheringIndex="1">
<Grid.Resources>
<DataTemplate x:Key="KiloTemplate">
<Grid Background="DarkBlue">
<TextBlock Text="{Binding}" FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="kg" FontSize="24" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
</DataTemplate>
</Grid.Resources>
<toolkitPrimitives:LoopingSelector x:Name="loopingSelectorStarost" Margin="12" Width="128" ItemSize="128,128" ItemTemplate="{StaticResource StarostTemplate}" ManipulationStarted="loopingSelector_ManipulationStarted">
<toolkitPrimitives:LoopingSelector.DataSource>
<local:NumberDataSource Privzeti="18" Minimum="13" Maximum="99" />
</toolkitPrimitives:LoopingSelector.DataSource>
</toolkitPrimitives:LoopingSelector>
</Grid>
EDIT: Here's the soulution, thanks to Chris. W. I copied the style from the Generic.xaml file in the Phone Toolkit samples. I changed the <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> in the Selected Visual State. Here's the code:
<Style TargetType="toolkitPrimitives:LoopingSelectorItem">
<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
<Setter Property="Padding" Value="6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="root" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="Expanded" GeneratedDuration="0:0:0.33" />
<VisualTransition From="Expanded" To="Normal" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="background" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkGray" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="Foreground" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.RenderTransform>
<TranslateTransform x:Name="Transform"/>
</Border.RenderTransform>
<Grid>
<Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>
<Border x:Name="border" Opacity="0" BorderThickness="3" BorderBrush="{StaticResource PhoneSubtleBrush}">
<ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<ContentPresenter x:Name="contentPresenter" CacheMode="BitmapCache"/>
</ContentControl>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Start by finding the template for it, a quick solution search for TargetType="primitives:LoopingSelectorItem" should expose it pretty quick or you could likely get to it in Blend.
Once you have the template you'll just locate the Border or Rectangle object in the template that's causing that border.
However that may not even be necessary if the property is bound to the template already. Can you set something like BorderBrush directly to it? I'd have to load something up to look so I'm just guessing at this point.
Hope this helps.
This is my code fo ACB:
<toolkit:AutoCompleteBox x:Name="acbAddress" VerticalAlignment="Top"
ItemsSource="{Binding Source={StaticResource autoCompleteWordList}, Path=ListOfAddresses}"
TextChanged="acbAddress_TextChanged" KeyUp="acbAddress_KeyUp"
Style="{StaticResource AutoCompleteBoxStyle1}"
SelectionChanged="AcbAddress_OnSelectionChanged"/>
And I found this to get Text_OnSelectionChanged working for my cursor to set right position. But now I have popup with very little font size. How can I now set font size for items in popup?
<ControlTemplate x:Key="CommonValidationToolTipTemplate" TargetType="ToolTip">
<Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="Translation" X="-25"/>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.2" To="Open">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="Translation">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude=".3" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Closed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Open">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="Translation"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Background="#052A2E31" CornerRadius="5" Margin="4,4,-4,-4"/>
<Border Background="#152A2E31" CornerRadius="4" Margin="3,3,-3,-3"/>
<Border Background="#252A2E31" CornerRadius="3" Margin="2,2,-2,-2"/>
<Border Background="#352A2E31" CornerRadius="2" Margin="1,1,-1,-1"/>
<Border Background="#FFDC000C" CornerRadius="2">
<TextBlock Foreground="White" MaxWidth="250" Margin="8,4,8,4" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}" UseLayoutRounding="false"/>
</Border>
</Grid>
</ControlTemplate>
<Style x:Key="AutoCompleteBoxStyle1" TargetType="toolkit:AutoCompleteBox">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="MinWidth" Value="45"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:AutoCompleteBox">
<Grid Opacity="{TemplateBinding Opacity}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PopupStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" To="PopupOpened"/>
<VisualTransition GeneratedDuration="0:0:0.2" To="PopupClosed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="PopupOpened">
<Storyboard>
<DoubleAnimation To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PopupBorder"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PopupClosed">
<Storyboard>
<DoubleAnimation To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PopupBorder"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBox x:Name="Text" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsTabStop="True" Margin="0" Padding="{TemplateBinding Padding}" Style="{TemplateBinding TextBoxStyle}" SelectionChanged="Text_OnSelectionChanged"/>
<Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource CommonValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12">
<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="1,3,0,0"/>
<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="1,3,0,0"/>
</Grid>
</Border>
<Popup x:Name="Popup">
<Grid Opacity="{TemplateBinding Opacity}">
<Border x:Name="PopupBorder" BorderThickness="0" Background="#11000000" HorizontalAlignment="Stretch" Opacity="0">
<Border.RenderTransform>
<TranslateTransform X="1" Y="1"/>
</Border.RenderTransform>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" HorizontalAlignment="Stretch" Opacity="1.0" Padding="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDDDDDD" Offset="0"/>
<GradientStop Color="#AADDDDDD" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.RenderTransform>
<TransformGroup>
<TranslateTransform X="-1" Y="-1"/>
</TransformGroup>
</Border.RenderTransform>
<ListBox x:Name="Selector" BorderThickness="0" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemTemplate="{TemplateBinding ItemTemplate}" ItemContainerStyle="{TemplateBinding ItemContainerStyle}" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</Border>
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks
You should be able to just give a custom Item style via ItemContainerStyle by targeting the ListBoxItem like;
<Style x:Key="myItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Khaki" />
<Setter Property="Foreground" Value="DarkSlateGray" />
<Setter Property="Margin" Value="5" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="FontSize" Value="14" /><!-- Your Property -->
<Setter Property="BorderBrush" Value="DarkGray" />
</Style>
<toolkit:AutoCompleteBox ItemContainerStyle="{StaticResource myItemStyle}" />
You could also use BasedOn to inherit the rest of the existing style stuff from the default template into your Style so you would only be changing the FontSize
More detailed info found here
Hope this helps.
I have a Style xaml without a .cs File
Below you can find a part of my code. There you can find the TextBlock. I would like to change the fontcolor there when the user takes an action (hover, click, whatever). As you can see there is the VisualStateManager who deals with the events of the Combobox. Is it possible to overwrite the foreground in the Visual state manager (for example: If "click" then red, if "hover" then blue)?
I've spent many time to find a solution for my problem but there is no solution in view...
Can anybody help my? Attention the solution is only in a xaml file implemented that holds all styles from my controls.
<Border x:Name="ContentPresenterBorder"
BorderBrush="Blue">
<Grid>
<ToggleButton x:Name="DropDownToggle"
HorizontalAlignment="Stretch"
Margin="0"
Style="{StaticResource comboToggleStyle}"
VerticalAlignment="Stretch"
BorderThickness="{TemplateBinding BorderThickness}"
HorizontalContentAlignment="Right"
Background="White"
BorderBrush="{x:Null}">
</ToggleButton>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="TextTextBlock"
Text="{TemplateBinding Tag}"
FontWeight="Bold"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="{TemplateBinding Padding}"
Effect="{StaticResource MenuDropShadowEffect}"
IsHitTestVisible="False">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction PropertyName="Foreground">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="#FF04A925" />
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction PropertyName="Foreground">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="Black"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
<Path x:Name="BtnArrow"
Stretch="Uniform"
Height="4"
HorizontalAlignment="Right"
Margin="0,0,6,0"
Width="8"
Fill="White"
Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z "
Effect="{StaticResource MenuDropShadowEffect}"
IsHitTestVisible="False">
</Path>
</StackPanel>
<ContentPresenter x:Name="ContentPresenter"
Visibility="Collapsed" />
</Grid>
</Border>
<Rectangle x:Name="DisabledVisualElement"
Fill="White"
RadiusX="3"
RadiusY="3"
IsHitTestVisible="false"
Opacity="0" />
<Rectangle x:Name="FocusVisualElement"
Stroke="{x:Null}"
StrokeThickness="1"
RadiusX="2"
RadiusY="2"
Margin="1"
IsHitTestVisible="false"
Opacity="0"
Fill="{x:Null}" />
<Border x:Name="ValidationErrorElement"
Visibility="Collapsed"
BorderBrush="#FFDB000C"
BorderThickness="1"
CornerRadius="1">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Template="{StaticResource ValidationToolTipTemplate}"
Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip"
Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Height="12"
HorizontalAlignment="Right"
Margin="1,-4,-4,0"
VerticalAlignment="Top"
Width="12"
Background="Transparent">
</Grid>
</Border>
<Popup x:Name="Popup"
Margin="0,1,0,0">
<Border x:Name="PopupBorder"
Height="Auto"
HorizontalAlignment="Stretch"
CornerRadius="3"
BorderBrush="#FFC1C1C1"
BorderThickness="0,0,1,1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF"
Offset="0" />
<GradientStop Color="#FFFEFEFE"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ScrollViewer x:Name="ScrollViewer"
BorderThickness="0"
Padding="1">
<ItemsPresenter />
</ScrollViewer>
</Border>
</Popup>
<ContentControl x:Name="HeaderText" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" >
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.Effect>
<DropShadowEffect BlurRadius="0"
Color="#FF666666"
Direction="90"
ShadowDepth="1"/>
</ContentPresenter.Effect>
</ContentPresenter>
</ContentControl>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver" >
<!--<Storyboard>
<ColorAnimation
Storyboard.TargetName="HeaderText"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Duration="0" To="#FF000000"/>
</Storyboard>-->
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFFF0000"/>
</ColorAnimationUsingKeyFrames>-->
<!--<ColorAnimation
BeginTime="00:00:00"
Duration="00:00:00.0010000"
From="#FFFFFFFF" To="#FF000000"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="(UIElement.Foreground).Color"
/>-->
<ColorAnimation
BeginTime="00:00:00"
Duration="00:00:00.0010000"
From="#FFFFFFFF" To="#FF000000"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="(TextBlock.Foreground).Color"
/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00"
Value=".55" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HeaderText"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFFF0000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="FocusedDropDown">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="TextTextBlock"
Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Direction)">
<EasingDoubleKeyFrame KeyTime="00:00:00"
Value="-90" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="TextTextBlock"
Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)">
<EasingColorKeyFrame KeyTime="00:00:00"
Value="#FF333333" />
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="TextTextBlock"
Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)">
<EasingDoubleKeyFrame KeyTime="00:00:00"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="TextTextBlock"
Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)">
<EasingDoubleKeyFrame KeyTime="00:00:00"
Value="2" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="PopupBorder"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<!--<ColorAnimation
BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="(UIElement.Foreground).(SolidColorBrush.Color)"
From="White" To="Black"
/>-->
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HeaderText"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFFF0000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid" />
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip"
Storyboard.TargetProperty="IsOpen">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Trigger Property="IsMouseOver" Value="True"> for mouse hover.
WPF: Change background color of border on left mouse button down for mouse click
hei guys.. i could solve it by myself!
the mistake was:
Storyboard.TargetName="Content"... should have been referring to "textBlock" of course....
hope to be helpful for someone else as well...
I have the following listbox below which binds to a database table of image URL's. When the application is running, it is possible to click on each individual image, and witness a light blue selection box appear on the image (you can tell when each individual image is selected as its clicked). What I would like to be able to do is perform a zoom upon clicking each image. Does anyone know of a way in which I could do this by amending the code I am currently using below!? (The reason for this is that I need to display the images in a horizontal listbox, which is what this code does.)
<ListBox x:Name="list1" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" Width="400" d:LayoutOverrides="HorizontalAlignment">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<Image Width="100" Height="100" Stretch="Fill" Source="{Binding LowResUrl}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can use this snippet you are currently using ItemTemplate there is one more template GeneratedItemContainer(ItemContainerStyle)
<Style x:Key="ListBoxItemStyleContainerWide" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="grid" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1"/>
<ColorAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" To="#FFF6BD43"/>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#00F6BD43"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF6BD43"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" RadiusX="10" RadiusY="10" IsHitTestVisible="False" Width="950" Height="74" Stroke="Black" StrokeThickness="3"/>
<Rectangle x:Name="fillColor2" Fill="#FFEEDEA7" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="0"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Rectangle x:Name="FocusVisualElement" StrokeThickness="1" RadiusX="10" RadiusY="10" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can access the ListBoxItem control's visualStateManager by overriding the ControlTemplate. In Expression Blend select a ListBoxItem and "Edit a copy" of the Template. This will copy the old ListBoxItem control's style and control template to givey ou a nice starting place to modify what happens on key events that this ListBox control is setup to handle.
After doing this you can apply animations within the visual state manager on a wide variety of events (Hover, Selection, disabled, etc).
If you are data binding your ItemsSource property and don't have literal ListBoxItems to generate a ListBoxItem Style to start from, just create a new ListBox and add a ListBoxItem to it to generate the Style+ControlTemplate from. Once you generate the style, you can change your nice data bound ListBox Item's control template by specifying the newly created resource on your data bound ListBox control's ItemContainerStyle property.