How can I stop the treeview collaps event after mouse click on TreeViewItem arrow (on view)?
I need to show my treeview expanded all time.
You could set the Collapsed event in XAML:
<TreeView
Name="myTreeView"
ItemsSource="{Binding dataSource}">
<TreeView.ItemContainerStyle>
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="True" />
<Style.Triggers>
<EventTrigger RoutedEvent="Collapsed">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Duration="0"
Storyboard.TargetProperty="(TreeViewItem.IsExpanded)">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
You can set the Collapsed event on the TreeViewItem to this:
private void TreeViewItem_Collapsed(object sender, RoutedEventArgs e)
{
(sender as TreeViewItem).IsExpanded = true;
}
It doesn't prevent it from collapsing however, it just automatically expands it whenever it's collapsed.
Just retemplate the TreeViewItems to not even have an arrow (and collapsible area).
e.g.
<Style TargetType="TreeViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<ContentPresenter ContentSource="Header"/>
<ItemsPresenter Margin="20,0,0,0"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
(This is the bare minimum, you will want to have triggers to show the current selection if you need that)
Related
How can I hide a parent TabControl until the child in one of its tabs is clicked on? Obviously, I need the child to be visible for the user to be able to click on it. The only thing that I have managed to come up with so far is a bit of a hack... I'm displaying an extra child item over the top of the TabControl and then hiding it and showing the TabControl upon clicking. Here is my hack:
XAML:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="500" Width="600"
PreviewMouseLeftButtonUp="Grid_PreviewMouseLeftButtonUp">
<Window.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="300" />
<Setter Property="Height" Value="250" />
</Style>
</Window.Resources>
<Grid>
<TabControl Name="TabControl" Width="350" Height="300">
<TabItem Header="Original">
<Rectangle Fill="Red" />
</TabItem>
<TabItem Header="Modified">
<Rectangle Fill="Blue" />
</TabItem>
<TabControl.Style>
<Style TargetType="{x:Type TabControl}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsTabControlVisible}"
Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</TabControl.Style>
</TabControl>
<Rectangle Fill="Red" Margin="0,22,0,0"
PreviewMouseLeftButtonUp="Rectangle_PreviewMouseLeftButtonUp">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}"
BasedOn="{StaticResource {x:Type Rectangle}}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsTabControlVisible}"
Value="True">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Grid>
</Window>
Code behind:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace WpfApp1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
public static readonly DependencyProperty IsTabControlVisibleProperty =
DependencyProperty.Register(nameof(IsTabControlVisible), typeof(bool),
typeof(MainWindow), null);
public bool IsTabControlVisible
{
get { return (bool)GetValue(IsTabControlVisibleProperty); }
set { SetValue(IsTabControlVisibleProperty, value); }
}
private void Rectangle_PreviewMouseLeftButtonUp(object sender,
MouseButtonEventArgs e)
{
IsTabControlVisible = true;
}
private void Grid_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (!TabControl.IsMouseOver) IsTabControlVisible = false;
}
}
}
I've changed the content to plain Rectangles for simplicity.
How can I improve this situation? I don't like the idea of duplicating the child content to make this work. Does anyone have any better solutions?
You could, as #XAMIMAX mentioned, hide the TabControl but not by its Opacity (because setting it to 0 would hide the child too). The following XAMLis just a quick & dirty proof of concept by hiding all the Elements except the Child:
<TabControl Name="TabControl" Width="350" Height="300" BorderBrush="Transparent">
<!-- Content of the Tabcontrol -->
<TabItem Header="Original">
<Rectangle Fill="Red" />
</TabItem>
<TabItem Header="Modified" >
<Rectangle Fill="Blue" />
</TabItem>
<!-- Triggers for the TabControl -->
<TabControl.Triggers>
<!-- Set Borderbrush to Black when tab is clicked -->
<EventTrigger RoutedEvent="MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Colors.Black}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<!-- Reset BorderBrush when Mouse leaves the TabControl (choose wathever condition you like to hide the tabs) -->
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Colors.Transparent}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</TabControl.Triggers>
<!-- Set "Style" of Container -->
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<!-- Hide Header -->
<Setter Property="Visibility" Value="Hidden"/>
<!-- Show header when Border of parent is Black (you can choose a different Property if you like) -->
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabControl}}, Path=(BorderBrush).(SolidColorBrush.Color)}" Value="Black">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
The Tabcontrol has 2 Triggers: Setting the BorderBrush to Black when someone clicks on the TabControl and setting it to Transparent when the MousePointer leaves the TabControl. Theese two handle the visibility for the TabControl itself. Note: Add additional Triggers if your Background is different from the Color behind the TabControl.
The TabItem has a Trigger bound to the Color of the TabControl Border. If the Color is black, show the Header of the TabItem otherwise, hide them.
I have ListBox:
<ListBox x:Name="ListBoxImages"
ScrollViewer.CanContentScroll="True"
UseLayoutRounding="False"
SelectionMode="Extended"/>
ListBox style:
<Style TargetType="{x:Type ListBox}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border Name="Border">
<ScrollViewer Focusable="false">
<WrapPanel ItemWidth="100"
IsItemsHost="True"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and ListBoxItem style (animation here, sorry for long code):
<Style TargetType="{x:Type ListBoxItem}">
<!--...-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="border"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ScaleTransform"/>
</TransformGroup>
</Border.RenderTransform>
<ContentPresenter/>
</Border>
<!--Animation-->
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.1"
From="0" To="1"/>
<DoubleAnimation Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.1"
From="0" To="1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Unloaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.1"
To="0"/>
<DoubleAnimation Storyboard.TargetName="ScaleTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.1"
To="0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Question. Animations when adding the element (FrameworkElement.Loaded) played not always. Such feeling that it is played when an item has been created, but not yet displayed.
The animation when item is deleted (FrameworkElement.Unloaded) does not play.
So, how to fix it?
Your Loaded storyboard is defined correctly, thus there should be other reasons why it is sometimes played correctly and sometimes not. Is there a long-living operation on the UI thread when a new item is added to the list box? This would result in a freeze so that the animation is not played fluently all the time.
Your Unloaded storyboard is not played because this event is raised when the element is removed from the visual / logical tree that is used to render the whole scene. This storyboard should be started before this removal but unfortunately there is no mechanism / event that tells that an item is to be removed.
Currently there is no easy way to fade out an item from an ItemsControl in WPF. In WinRT and Silverlight, there are two separate visual states for ItemsControl items that you can use for fade-in or fade-out. As Krishna mentioned, the only way is to implement custom functionality to tell an item that it is about to be removed and that it should run the fade-out animation. After that animation, the item can be removed from the visual / logical tree.
The animation hardly stops and the image resets its position but I want the animation to finish to the next full 360°.
Any ideas on that?
The XAML code:
<Button
BorderThickness="0"
Cursor="Hand"
Command="{Binding RefreshCommand}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border>
<ContentPresenter />
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="../Resources/RefreshIcon.png">
<Image.Style>
<Style>
<Setter Property="Image.RenderTransform">
<Setter.Value>
<RotateTransform />
</Setter.Value>
</Setter>
<Setter Property="Image.RenderTransformOrigin" Value=".5,.5">
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsRefreshing}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="RotationStoryboard">
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Angle"
From="0"
To="360"
Duration="0:0:0.8"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding IsRefreshing}" Value="False">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="RotationStoryboard"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button>
The final solution except the fact that it has to be put into a UserControl to make it more generic (also see #Sheridans post and my comment below):
<Button
BorderThickness="0"
Cursor="Hand"
Command="{Binding RefreshCommand}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border>
<ContentPresenter />
</Border>
</ControlTemplate>
</Button.Template>
<Image
Name="RefreshImage"
Source="../Resources/RefreshIcon.png"
RenderTransformOrigin=".5,.5">
<Image.Resources>
<Storyboard
x:Key="RotationStoryboard"
Completed="RotationStoryboardCompleted">
<DoubleAnimation
Storyboard.Target="{Binding ElementName=RefreshImage}"
Storyboard.TargetProperty="RenderTransform.Angle"
From="0"
To="360"
Duration="0:0:1.5">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseInOut"></CircleEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Image.Resources>
<Image.Style>
<Style>
<Setter Property="Image.RenderTransform">
<Setter.Value>
<RotateTransform />
</Setter.Value>
</Setter>
<Setter Property="Image.RenderTransformOrigin" Value=".5,.5">
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsRefreshing}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<StaticResource ResourceKey="RotationStoryboard"/>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button>
Code behind:
public partial class SomeView
{
public SomeView()
{
InitializeComponent();
}
private void RotationStoryboardCompleted(object sender, EventArgs e)
{
var viewModel = (ISomeViewModel)DataContext;
var storyboard = (Storyboard)((ClockGroup)sender).Timeline;
if (viewModel.IsRefreshing)
{
storyboard.Begin();
}
}
}
I don't know of any way to do this in XAML, but with code, there is a Timeline.Completed Event that you can use. If you attach a handler to your Storyboard, then it will get called when it is finished and you can do whatever you want:
<BeginStoryboard>
<Storyboard Name="RotationStoryboard" Completed="StoryboardCompleted">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" From="0"
To="360" Duration="0:0:0.8" />
</Storyboard>
</BeginStoryboard>
In code:
private void StoryboardCompleted(object sender, EventArgs e)
{
// Restart your Storyboard here each time until you want it to stop.
}
For further help, please see the example in the linked page on MSDN.
So I want a list of items that when you select them they expand to show more info (no toggleButton).
I figure there are multiple ways to do this but what I started at was that I had a ListView bound to the collection of viewModels and then defined the ViewModel view as Expander. Problem here was binding the selected one to be expanded.
I started getting multiple ideas on how this could be done differently. Perhaps modding the ControlTemplate of the ListView to have it's items set as my own type of expander. But I'm not sure how well that works when the ItemsSource is set for the list.
Problem is I'm not too sure what the best way here is.
You can easily select the DataTemplate of the selected ListViewItem by setting ListView.ItemContainerStyle and using appropriate triggers.
Here's an example of how you can not only change the visual tree of the selected item, but also animate its properties at the same time as well.
<ListView ItemsSource="{Binding ...}">
<ListView.Resources>
<!-- this is what unselected items will look like -->
<DataTemplate x:Key="DefaultItemTemplate">
<TextBlock FontSize="12" Margin="0,0,10,0" Text="Unselected" />
</DataTemplate>
<DataTemplate x:Key="SelectedItemTemplate">
<Border BorderBrush="Red" BorderThickness="2" Padding="5">
<TextBlock FontSize="12" Margin="0,0,10,0" Text="Selected" />
</Border>
</DataTemplate>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<!-- set properties for all items -->
<Setter Property="Margin" Value="0,2,0,2" />
<Setter Property="Padding" Value="0,2,0,2" />
<Setter Property="ContentTemplate" Value="{StaticResource DefaultItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<!-- change what the selected item looks like -->
<Setter Property="ContentTemplate" Value="{StaticResource SelectedItemTemplate}" />
<!-- animate it as well -->
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="MinHeight" To="80" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="MinHeight" To="0" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I have a couple of TextBlocks, bound to different things. Both TextBlocks have the same style applied. In the style there is an eventtrigger which flashes the text when the bound value updates. All works great however when the value for one textblock updates, both textblocks flash. I was expecting just one TextBlock to flash. Any ideas?
<Style x:Key="flashingTextBlock" TargetType="TextBlock">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#333333" />
<Style.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
To="Orange"
Duration="0:0:1"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
<TextBlock Text="{Binding Path=PcName, NotifyOnTargetUpdated=True}"
Style="{StaticResource flashingTextBlock}"/>
<TextBlock Text="{Binding Path=Time, NotifyOnTargetUpdated=True}"
Style="{StaticResource flashingTextBlock}"/>
Basically I cannot reproduce this (with a similar config).
I suggest you verify what is actually happening. It could be that your codebehind (ViewModel) is calling PropertyChanged to enthusiastically.