Get the the source from ToggleButton contained into a style - wpf

I have multiple expanders using a style. Into the style is defined a toggle button, and when I click on It I need to detect which off the togglebutton have been clicked.
expander 1:
<Expander Style="{StaticResource PreviewExpanderNewGeneration}" VerticalAlignment="Top" Grid.ColumnSpan="2" Name="expander1" OverridesDefaultStyle="True" Header="Expander1Header" Margin="0,0,0,0">
<GroupBox Height="150" FontStyle="Normal" utilities:GroupNameUpperConverter.CharacterCasing="Upper" Name="ContainerforExpander1" Background="#717171" Margin="0,0,0,0" >
</GroupBox>
</Expander>
expander 2:
<Expander Style="{StaticResource PreviewExpanderNewGeneration}" VerticalAlignment="Top" Grid.ColumnSpan="2" Name="expander2" OverridesDefaultStyle="True" Header="Expander2Header" Margin="0,0,0,0">
<GroupBox Height="150" FontStyle="Normal" utilities:GroupNameUpperConverter.CharacterCasing="Upper" Name="ContainerforExpander2" Background="#717171" Margin="0,0,0,0" >
</GroupBox>
</Expander>
the style define contains a Togglebutton who change graphically when clicked on. But I want to know which of the togglebutton from the expanders have been clicked:
XAML
<Style TargetType="Expander" x:Key="PreviewExpanderNewGeneration" BasedOn="{StaticResource BaseControlStyle}" >
<!--x:Key="GroupBoxStyle"-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Grid>
<!--Grid Rows split the GroupBox into two areas -->
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<!--Header area-->
<Border Name="HeaderArea"
Grid.Row="0"
Background="Transparent"
VerticalAlignment="Center"
BorderBrush="Transparent"
BorderThickness="1"
CornerRadius="2,2,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67"/>
<ColumnDefinition Width="45"/>
<ColumnDefinition Width="95"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="3" >
<Label Foreground="White" Grid.Column="0" utilities:LabelUpperCase.CharacterCasing="Upper" Name="PreviewLabelExpander" FontSize="15" HorizontalAlignment="Left" Loaded="PreviewLabelExpander_Loaded" FontWeight="Normal" Content="{TemplateBinding Header}" ></Label>
<StackPanel VerticalAlignment="Center">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding IsHelp}" Value="true">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsHelp}" Value="false">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</StackPanel>
<ToggleButton
Grid.Row="0"
Grid.Column="3"
Margin="79,4,0,4"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Template="{StaticResource PreviewToggleButton}"
OverridesDefaultStyle="True"
Click="PreviewExpanderButton_Click"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Width="20">
</ToggleButton>
</Grid>
</Border>
<!-- Main client area -->
<Border Name="ContentArea"
Grid.Row="1"
Height="100"
BorderBrush="Transparent"
BorderThickness="1,1,1,1"
CornerRadius="6,5,6,6" >
<ContentPresenter x:Name="ExpanderContent"
VerticalAlignment="Top"
Height="100"
Margin="0,0,0,0" >
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleY="0"></ScaleTransform>
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)"
To="1"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContent"
Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)"
To="0"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and now the click event should detect the source but how?
private void PreviewExpanderButton_Click(object sender, RoutedEventArgs e)
{
//how to detect which of the toogle button have been clicked?
ToggleButton tmp = (ToggleButton) sender;
}

If you want to get a reference to the parent Expander of the ToggleButton that was clicked, you could use the following helper method:
private void PreviewExpanderButton_Click(object sender, RoutedEventArgs e)
{
ToggleButton tmp = (ToggleButton)sender;
Expander expander = FindParent<Expander>(tmp);
MessageBox.Show(expander?.Name ?? String.Empty);
}
private static T FindParent<T>(DependencyObject dependencyObject) where T : DependencyObject
{
var parent = VisualTreeHelper.GetParent(dependencyObject);
if (parent == null) return null;
var parentT = parent as T;
return parentT ?? FindParent<T>(parent);
}

Related

How to give a custom shape to a Tab Control in WPF?

I make an application in WPF where I need to use the TabControl to switching between Contents. But due to design purpose my content of the Tab items are in same horizontal line followed by the Tab item header.
Here is the code of my Mainwindow.xaml
<Grid Width="635" HorizontalAlignment="Left" Height="458" VerticalAlignment="Top" Margin="0,61,0,0" >
<TabControl Margin="-1" BorderThickness="0" Background="#222222" >
<TabItem Style="{StaticResource TabItemDefaults}" Header="File manager" FontSize="10" Foreground="#efefef" Margin="5,0,0,0" Width="97" Height="20" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" >
<Grid>
<Label Name="Folder" Content="Folder:" FontSize="10" Foreground="#efefef" Height="20" Width="40" Margin="-571,-367,0,0" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" />
<Button Name ="FolderSelect" Width="532" HorizontalAlignment="Left" VerticalAlignment="Top" Height="33" Margin="85,17,0,0" Background="#1a1a1a"
materialDesign:ShadowAssist.ShadowDepth="Depth0" materialDesign:RippleAssist.Feedback="Transparent" BorderThickness="0" UseLayoutRounding="True"
></Button>
<Label Name="ShowFolders" Content=".." Margin="-479,59,0,0" Background="#1a1a1a" Width="168" Height="373" Foreground="#efefef" ></Label>
<Button
Style="{StaticResource MaterialDesignRaisedButton}"
Width="65" HorizontalAlignment="Left" Height="25" Background="#FF403D3D" Margin="16,292,0,0"
ToolTip="Resource name: MaterialDesignRaisedButton">
<materialDesign:PackIcon Kind="PlusThick" />
</Button>
<Button
Style="{StaticResource MaterialDesignRaisedButton}"
Width="65" HorizontalAlignment="Left" Height="25" Background="#FF403D3D" Margin="82,292,0,0"
ToolTip="Open output folder">
<materialDesign:PackIcon Kind="FolderUpload" />
</Button>
<Label Content="Video recordings:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="269.2,-22,0,0" Foreground="#efefef" FontSize="10" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" />
</Grid>
</TabItem>
<TabItem Style="{StaticResource TabItemDefaults}" Header ="Preview" FontSize="10" Foreground="#efefef" Width="67" Height="20" Margin="-8,0,0,0" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" >
<Grid>
<CheckBox Content="Draggable mode" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="520,-22,0,0" Width="110" />
</Grid>
</TabItem>
</TabControl>
</Grid>
Both Tab Control and Tab items are made by control template which I declare in App.xaml.
And here is the code of Tab Control which I separately declare in App.xaml -
<Style TargetType="{x:Type TabControl}" x:Key="TabControlDefaults" x:Name="NewTabcontrol" >
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.BorderBrush).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="#FFAAAAAA" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ContentAreaColorLight}"
Offset="0" />
<GradientStop Color="{DynamicResource ContentAreaColorDark}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}"/>
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here is the code of Tab Items which I separately declare in App.xaml -
<Style TargetType="{x:Type TabItem}" x:Key="TabItemDefaults" x:Name="NewTabitem" >
<Setter Property="Foreground" Value="#bababa" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="Panel" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<!-- <Setter TargetName="Panel" Property="Background" Value="LightSkyBlue" /> -->
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}">
<TextBlock.TextDecorations>
<TextDecoration PenOffset="4" PenOffsetUnit="Pixel" >
<TextDecoration.Pen>
<Pen Brush="#673ab7" Thickness="4" />
</TextDecoration.Pen>
</TextDecoration>
</TextBlock.TextDecorations>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#212121" />
<Setter Property="Foreground" Value="WhiteSmoke"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And my question is the checkbox (I give a red circle) are not functioning properly. I know the main cause is the check box is outside of the tab panel of the Tab Control. But I have to place it there for the design purpose of my Application.
So, how I give a custom shape to the tab panel of the Tab control so that I perfectly dock my content elements where I want.
Your CheckBox can't be selected , you can use DataTrigger to make the chexkbox Visible or Hidden depending on the Preview TabItem selected or not.
I do some update for your MainWindow.xaml to make the checkbox can be selected.
<StackPanel Width="635" HorizontalAlignment="Left" Height="458" VerticalAlignment="Top" Margin="0,61,0,0" >
<CheckBox Content="Draggable mode" HorizontalAlignment="Right" VerticalAlignment="Top" Width="110" >
<CheckBox.Style>
<Style TargetType="CheckBox">
<Setter Property="Visibility" Value="Hidden"></Setter>
<Setter Property="IsEnabled" Value="False"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myTabControl,Path=SelectedItem.Header}" Value="Preview" >
<Setter Property="Visibility" Value="Visible"></Setter>
<Setter Property="IsEnabled" Value="True"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</CheckBox.Style>
</CheckBox>
<TabControl BorderThickness="0" Background="#222222" Name="myTabControl" SelectionChanged="myTabControl_SelectionChanged">
<TabItem Style="{StaticResource TabItemDefaults}" Header="File manager" FontSize="10" Foreground="#efefef" Margin="5,0,0,0" Width="97" Height="20" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" >
<Grid Height="300">
</Grid>
</TabItem>
<TabItem Style="{StaticResource TabItemDefaults}" Header ="Preview" FontSize="10" Foreground="#efefef" Width="67" Height="20" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" >
<Grid Height="300">
</Grid>
</TabItem>
</TabControl>
</StackPanel>

How to change the borderbrush on a Mouse Over event in WPF

I am trying to change the color of the BorderBrush when the mouse is hovering over the button. I have created a new control template for the button however when setting up the triggers visual studio tells me i have got to use an EventTrigger but when i use this there is no MouseOver event, only a MouseEnter event. When applying this and running the solution the border brush does not change. Any Suggestions?
EDIT:
Code I am having the issue with:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<ControlTemplate x:Key="LogInButton">
<Grid Width="AUTO" Height="AUTO">
<Border x:Name="ButtonBorder"
BorderBrush="#B7B7B7"
BorderThickness="2"
Background="Transparent"
Cursor="Hand">
<Image Source="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border.Triggers>
<EventTrigger RoutedEvent="MouseMove">
<EventTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="ButtonBorder"
Storyboard.TargetProperty="BorderBrush"
To="White"
Duration="0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.EnterActions>
</EventTrigger>
</Border.Triggers>
</Border>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Button Template="{StaticResource LogInButton}" Tag="Images/Login.png" Height="50" Width="50" Background="Transparent">
</Button>
</Grid>
You could just add a Trigger to <ControlTemplate.Triggers> instead of adding an EventTrigger to <Border.Triggers>:
<ControlTemplate x:Key="LogInButton">
<Grid Width="AUTO" Height="AUTO">
<Border x:Name="ButtonBorder"
BorderBrush="#B7B7B7"
BorderThickness="2"
Background="Transparent"
Cursor="Hand">
<Image Source="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="BorderBrush" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

WPF more then one DataTrigger

Would you know why the XAML below is not working. It looks like I can not have more than one DataTrigger for an element. Those Storyboards within DataTrigger, as you can tell are being executed on a button click.
The end reason is that on a button click, one grid should slide up, and the other slide down, achieving sort of accordian animation. Thanks
<StackPanel Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,0">
<!--Add New Banner Grid-->
<!--<Grid DockPanel.Dock="Top" Background="#FFE0FFD2" Height="50">-->
<Grid x:Name="grdAddBunner">
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="#FFE0FFD2"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btnEditBunner, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="150" To="0" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=btnAddBunner, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="150" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Content="Add New Banner" HorizontalAlignment="Center" Foreground="DarkGreen" FontWeight="Bold"></Label>
<Label Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" Content="Fund"></Label>
<telerik:RadComboBox Grid.Row="1" Grid.Column="1" telerik:StyleManager.Theme="Windows8" Margin="3" ItemsSource="{Binding LstFund}"></telerik:RadComboBox>
<Label Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" Content="Banner"></Label>
<TextBox Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" telerik:StyleManager.Theme="Windows8" Margin="3" Text="{Binding AddBannerName}"></TextBox>
<Button Grid.Row="3" Grid.Column="1" Content="Save" Command="{Binding AddBannerCmd}" Height="25" Width="80" HorizontalAlignment="Left"></Button>
<Button Grid.Row="3" Grid.Column="2" Content="Calcel" Height="25" Width="80" HorizontalAlignment="Right"></Button>
</Grid>
</Grid>
<!--Edit Existing Banner Grid-->
<!--<Grid DockPanel.Dock="Top" Background="#FFFFF7D2" Height="50">-->
<Grid x:Name="grdEditBanner">
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="#FFFFF7D2"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btnAddBunner, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="150" To="0" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=btnEditBunner, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="150" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Content="Edit Existing Banner" HorizontalAlignment="Center" Foreground="#FF5B6400" FontWeight="Bold"></Label>
<Label Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" Content="Fund"></Label>
<telerik:RadComboBox Grid.Row="1" Grid.Column="1" telerik:StyleManager.Theme="Windows8" Margin="3" ItemsSource="{Binding LstFund}" SelectedItem="{Binding SelectedBannerFund}"></telerik:RadComboBox>
<Label Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" Content="Banner"></Label>
<TextBox Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" telerik:StyleManager.Theme="Windows8" Margin="3" Text="{Binding SelectedBannerName}"></TextBox>
<Button Grid.Row="3" Grid.Column="1" Content="Save" Command="{Binding UpdateBannerCmd}" Height="25" Width="80" HorizontalAlignment="Left"></Button>
<Button Grid.Row="3" Grid.Column="2" Content="Calcel" Height="25" Width="80" HorizontalAlignment="Right"></Button>
</Grid>
</Grid>
</StackPanel>
The "IsPressed" lets you know when the button is "active" this changes again when you release the button.
Have you tried moving this to a command binding on the button and set properties on your viewModel that those grids can use to set styles on themselves?

Change Grid Panel Border color Using C# programatically- WPF

I have Grid Panel and I want to its border color to change when we click on button
<Grid Grid.Row="3" Name="LocationLayoutPanel" VerticalAlignment="Top"
Margin="0,51,0,0" Height="65" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions >
<Border BorderThickness="2,2,2,2" BorderBrush="Red" Grid.ColumnSpan="3"
Grid.RowSpan="2"/>
<Button Content="change border color" Grid.Row="1" Grid.Column="1"
Click="chnageBGCOLOR"></Button>
</Grid>
When I click on "change border color" button its grid border color should be changed!
Thank you!
XAML:
<Border BorderThickness="2,2,2,2" Grid.ColumnSpan="3"
Grid.RowSpan="2">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Red"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Button, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
To="GreenYellow"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Button Name="Button" Content="change boarder color" Grid.Row="1" Grid.Column="1"></Button>
Programically:
Add Name to Border and set as follows:
BorderName.BorderBrush = new SolidColorBrush(Colors.GreenYellow);

Need some suggestions about how to reference outside control

I insert a Tabcontrol into a BorderControl. The Tabcontrol used seperate styles. Right now the Close Button inside Tabcontrol can refer to itself. So when click it the TabControl is closed I guess so. Is it possible to refer the button to the Border control outside so that when close the Border control is collpased?
<DockPanel LastChildFill="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" MinWidth="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Margin="5,5,0,5" BorderBrush="Aqua" BorderThickness="1">
<TabControl Margin="0,15,0,0" Style="{StaticResource StandardTabControl}" >
<TabItem Header="Start">
</TabItem>
</TabControl>
</Border>
<GridSplitter Grid.Column="1" Background="Transparent" Width="6" HorizontalAlignment="Center"></GridSplitter>
<Border Grid.Column="2" BorderBrush="Aqua" BorderThickness="1" Margin="0,5,5,5"></Border>
</Grid>
</DockPanel>
After click the close button
And part of the styles of TabControl.
<Button Grid.Column="1" Height="15" Width="15" HorizontalAlignment="Center" VerticalAlignment="Center">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<Ac:CloseTabItemAction TabItem="{Binding RelativeSource={RelativeSource AncestorType=TabItem}}"
TabControl="{Binding RelativeSource={RelativeSource AncestorType=TabControl}}">
</Ac:CloseTabItemAction>
</i:EventTrigger>
</i:Interaction.Triggers>
<!--A lot more about styles-->
</Button>
here is a solution using control template triggers in pure xaml
<DockPanel LastChildFill="True">
<Control>
<Control.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"
MinWidth="100"
x:Name="column" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Margin="5,5,0,5"
BorderBrush="Aqua"
BorderThickness="1">
<TabControl Margin="0,15,0,0"
Style="{StaticResource StandardTabControl}"
x:Name="tabControl">
<TabItem Header="Start">
</TabItem>
</TabControl>
</Border>
<GridSplitter Grid.Column="1"
Background="Transparent"
Width="6"
HorizontalAlignment="Center"></GridSplitter>
<Border Grid.Column="2"
BorderBrush="Aqua"
BorderThickness="1"
Margin="0,5,5,5"></Border>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding HasItems,ElementName=tabControl}"
Value="false">
<Setter TargetName="column"
Property="MinWidth"
Value="0" />
<Setter TargetName="column"
Property="Width"
Value="0" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Control.Template>
</Control>
</DockPanel>
based on the assumption that when CloseTabItemAction will be called it will remove the TabItem from the TabControl, the trigger will detect the same based on HasItems property and will collapse the column if there are no items
EDIT
based on the comments here are the finding. while resizing GridSplitter sets a Local value to the ColumnDefinition's Width property which have higher precedence than the Trigger values so the Trigger effectively fails to modify the value.
the solution proposed is to use Animation to set the desired value as Animations has higher precedence then the Local value, and the desired value is applied to the property.
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding HasItems,ElementName=T1}"
Value="false">
<Setter TargetName="Co0"
Property="MinWidth"
Value="0" />
<Setter TargetName="G1"
Property="Width"
Value="0" />
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Co0"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<GridLength>0</GridLength>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</ControlTemplate.Triggers>
in the above code I also make the splitter width to 0 so that there is no empty space on the left

Resources