Hello,
Is there a way how to control these icons in the code behind? Tx!
You must define the style in the page you wish to handle the click event. Below is an example. Notice for one of the toggle buttons I allow the commanding framework to do it's thing and then for the other two toggle buttons I have defined the click event.
<Style x:Key="ReporTilePaneStyle" TargetType="igTileView:TilePane"><Setter Property="HorizontalContentAlignment" Value="Left"/><Setter Property="VerticalContentAlignment" Value="Top"/><Setter Property="BorderThickness" Value="1,1,1,1"/><Setter Property="BorderBrush" Value="{StaticResource BaseBorderBrushKey}"/><Setter Property="Background" Value="#FFFFFFFF"/><Setter Property="Padding" Value="3"/><Setter Property="Margin" Value="2"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="igTileView:TilePane"><Grid><Border><Border.Effect><DropShadowEffect BlurRadius="8" Opacity="0.25" ShadowDepth="3"/></Border.Effect><igTileViewPrim:DropIndicator x:Name="DropIndicator" Visibility="Collapsed"/></Border><Border x:Name="RootBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4,4,1,1"><Grid x:Name="PresenterGrid"><Grid.RowDefinitions><RowDefinition Height="Auto" MinHeight="18"/><RowDefinition Height="*"/></Grid.RowDefinitions><Rectangle Fill="Transparent" Margin="0,0,0,1" Grid.RowSpan="1"/><Border Cursor="Hand" Background="{StaticResource TilePaneFillKey}" CornerRadius="3,3,0,0"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition MinWidth="22" Width="Auto"/></Grid.ColumnDefinitions><Border Margin="0,0,0,1" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="3,3,0,0" Grid.ColumnSpan="2"/><ContentPresenter x:Name="headerContentPresenter" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="Left" Margin="3,0,3,0" VerticalAlignment="Center" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/><ToggleButton x:Name="CloseToggleButton" Height="12" Margin="0,0,5,0" Style="{StaticResource CloseToggleStyle}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="29" Grid.Column="1" IsChecked="false" ToolTipService.ToolTip="Close" Click="ToggleButtonClose_Click" Tag="{Binding RelativeSource={RelativeSource TemplatedParent}}"/><ToggleButton x:Name="MaximizedStateToggleButton" Height="12" Margin="0,0,33,0" Style="{StaticResource ToggleButtonStateStyle}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="29" Grid.Column="1" IsChecked="false" ToolTipService.ToolTip="Toggle"><ig:Commanding.Command><igTileView:TilePaneCommandSource EventName="Click" Parameter="Toggle" CommandType="Maximize"/></ig:Commanding.Command></ToggleButton><ToggleButton x:Name="ZoomStateToggleButton" Height="12" Margin="0,0,62,0" Style="{StaticResource ZoomToggleStyle}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="29" Grid.Column="1" IsChecked="false" RenderTransformOrigin="0.517,0.375" ToolTipService.ToolTip="Zoom" Click="ZoomStateToggleButton_Click" Tag="{Binding RelativeSource={RelativeSource TemplatedParent}}"/></Grid></Border><Rectangle x:Name="contentContentPresenterBG" Fill="{TemplateBinding Background}" Grid.Row="1"/><ContentPresenter x:Name="contentContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Row="1" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/></Grid></Border><Rectangle x:Name="dragBorder" Stroke="{StaticResource TilePaneDragBorderBrushKey}" StrokeThickness="2" RadiusX="1" RadiusY="1" Visibility="Collapsed"/><Rectangle x:Name="dropBackground" Fill="{StaticResource TilePaneDropBackgroundBrushKey}" RadiusX="1" RadiusY="1" Visibility="Collapsed"/></Grid></ControlTemplate></Setter.Value></Setter></Style>
Thanks Dan for your reply. How can I capture the click event when the user clicks on the header?
Your best option is to manage the toggle button path / image in xaml by defining a new style, the below code demonstrates this. You will want to tweak this to your own needs of course.
<Style x:Key="ToggleStyleZoom" TargetType="ToggleButton"><Setter Property="BorderThickness" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ToggleButton"><Grid><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates" ic:ExtendedVisualStateManager.UseFluidLayout="True"><VisualState x:Name="Normal"/><VisualState x:Name="MouseOver"><Storyboard><ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Border.Background)"><DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource btnHoverBrush}"/></ObjectAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="Pressed"><Storyboard><ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Border.Background)"><DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{StaticResource btnPressedBrush}"/></ObjectAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="Disabled"/></VisualStateGroup><VisualStateGroup x:Name="CheckStates"><VisualState x:Name="Checked"/><VisualState x:Name="Unchecked"/></VisualStateGroup><VisualStateGroup x:Name="FocusStates"><VisualState x:Name="Focused"/><VisualState x:Name="Unfocused"/></VisualStateGroup></VisualStateManager.VisualStateGroups><VisualStateManager.CustomVisualStateManager><ic:ExtendedVisualStateManager/></VisualStateManager.CustomVisualStateManager><Border x:Name="Bd" Background="{StaticResource BaseBorderBrushKey}" BorderBrush="#BFFFFFFF" BorderThickness="1,0,1,1" CornerRadius="0,0,2,2"><Border Margin="1,0,1,1" BorderBrush="#59FFFFFF" BorderThickness="1,0,1,1" CornerRadius="0,0,1,1"><Grid><Image Margin="51,8,52,8" Source="Images/zoom_16.png" Stretch="Fill"/></Grid></Border></Border></Grid></ControlTemplate></Setter.Value></Setter><Setter Property="Background" Value="{StaticResource BaseBorderBrushKey}"/><Setter Property="Foreground" Value="White"/></Style>