Listview Surpressing Controlttemplate Routed Events / Animation - c#

I have a style that modyfies the appearance of a radiobutton:
<Style TargetType="ctrl:RadioButtonWithIcon">
<Setter Property="Margin" Value="5,0"/>
<Setter Property="Foreground" Value="{StaticResource stdForeGround}"/>
<Setter Property="Background" Value="{StaticResource stdBackGround}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ctrl:RadioButtonWithIcon">
<Border BorderBrush="{StaticResource stdBorder}" Name="brdBackground" Background="{TemplateBinding Background}" BorderThickness="2" CornerRadius="5" MaxWidth="100" MaxHeight="80">
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ContentPresenter Margin="0,0,0,2" HorizontalAlignment="Center" Grid.Row="1" ContentSource="{TemplateBinding Content}"/>
<Path x:Name="pthIcon" StrokeEndLineCap="Square" Fill="{StaticResource stdDisabled}" Stretch="Uniform" Margin="5" StrokeThickness="3" Stroke="{TemplateBinding Foreground}" Data="{TemplateBinding IconPath}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter" SourceName="brdBackground">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="pthIcon" Storyboard.TargetProperty="Margin">
<ThicknessAnimation BeginTime="0:0:0" From="5" To="2,2,2,5" Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave" SourceName="brdBackground">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="pthIcon" Storyboard.TargetProperty="Margin">
<ThicknessAnimation BeginTime="0:0:0" To="5" From="2,2,2,5" Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
One feature of it is that the icon "wobbles" a bit when you hover over it. This is achieved using the eventtriger and a margin.
It works as expected if I use the radiobutton by itself:
now i used the control inside of a listview and for some reasons my mouseover events and animations dont fire anymore.
<ListView Background="Transparent" ItemContainerStyle="{StaticResource lstStyleVM}" BorderBrush="Transparent" BorderThickness="0" ItemsSource="{Binding FavoriteViewModes}" SelectedItem="{Binding SelectedFavorite}" Tag="{Binding ElementName=MW, Path=DataContext}">
<ListView.Style>
<Style TargetType="ListView">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Style>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<ctrl:RadioButtonWithIcon ViewMode="{Binding ViewMode}" Content="{Binding Name}" IsEnabled="False" IsChecked="{TemplateBinding IsSelected}"/>
<Grid Visibility="{TemplateBinding IsMouseOver, Converter={StaticResource boolToVisibility}}">
<Button Visibility="{TemplateBinding IsSelected, Converter={StaticResource boolToVisibility}}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0" Style="{StaticResource TransparentButton}" Command="{Binding ElementName=MW, Path=DataContext.RemoveFavorite}" CommandParameter="{Binding .}">
<Border Padding="0" BorderBrush="Gray" BorderThickness="1" CornerRadius="20" Background="Firebrick">
<Border Padding="0" BorderBrush="White" BorderThickness="2" CornerRadius="20" Background="Firebrick">
<Path Height="12" Width="12" Stretch="Fill" Margin="3" Fill="White" Data="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" />
</Border>
</Border>
</Button>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I think the listview is handeling the events and thus not passing them through to the radiobuton in its controltemplte but thats just a guess.
How can i get my animations to work in the listview as well?

Related

c# UWP ListView with horizontal ListViews

I have a vertical ListView. It hosts the multiple horizontal ListViews.
Example:
<ListView ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
</ListView>
<ListView ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Green"/>
</ListView>
</ListView>
Now the scroll doesn't work at all, just manipulation with touch.
I need to make scroll with mouse wheel to work only vertically, and manipulation to remain as it is now (both vertical and horizontal).
What am I doing wrong here?

For horizontal ListView, you could edit the default ItemsPanelTemplate and set Orientation as Horizontal then set crollViewer.HorizontalScrollMode to Enabled. And you could also the following horizontal ListView style directly. I have tested following your code, the style works.
<Style x:Key="MyListViewStyle" TargetType="ListView">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="IsSwipeEnabled" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel
Orientation="Horizontal"
VerticalAlignment="Top"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter Footer="{TemplateBinding Footer}"
FooterTransitions="{TemplateBinding FooterTransitions}"
FooterTemplate="{TemplateBinding FooterTemplate}"
Header="{TemplateBinding Header}"
HeaderTransitions="{TemplateBinding HeaderTransitions}"
HeaderTemplate="{TemplateBinding HeaderTemplate}"
Padding="{TemplateBinding Padding}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to align row selection in My toolkit Datagrid?

I am using My Toolkit datagrid. I have reduced the Row height. then when I am selecting a row. It is displaying like this. How can I get proper alignment for Datagid row.....
can any one help me how can I reduce the row height with proper alignment.
It is like this:
Code for this grid is:
<Border x:Name="WideMainGrid" Grid.Row="1" Grid.ColumnSpan="8" Background="Black" BorderThickness="1" BorderBrush="Gray" Margin="10,-5,5,0">
<ScrollViewer x:Name="svCartItemsList" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Grid.Row="1" Grid.ColumnSpan="8">
<controls:DataGrid x:Name="dgNewBill" RowBackgroundEvenBrush="Black" RowBackgroundOddBrush="Black" ItemsSource="{Binding objStockIssueItemList}" VerticalAlignment="Stretch" Height="470" SelectionMode="Single" TabNavigation="Local" HeaderBackground="Black" Background="Black" BorderThickness="1" BorderBrush="Gray" Grid.Row="2" Grid.ColumnSpan="9" Margin="0,0,0,0">
<controls:DataGrid.Resources>
<Converters:VisibilityConverter x:Key="vc" />
<Converters:NotConverter x:Key="nc" />
<Style x:Key="TransparentListBox" TargetType="ListBox">
<Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="ScrollViewer"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DataGridStyle1" TargetType="controls:DataGrid">
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="HeaderBackground" Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
<Setter Property="RowBackgroundOddBrush" Value="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
<Setter Property="CellTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Margin="12" Content="{Binding Control}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:DataGrid">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Visibility="Collapsed" Background="{TemplateBinding HeaderBackground}" Height="40" x:Name="ColumnHeaders">
<!-- HACK: Needed so that column DPs are working when adding columns in code only. -->
<ContentPresenter>
<controls:DataGridTextColumn />
</ContentPresenter>
</Grid>
<controls:MtListBox BorderThickness="0" Grid.Row="1"
ItemContainerStyle="{TemplateBinding RowStyle}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
Style="{StaticResource TransparentListBox}"
Margin="0" x:Name="Rows" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"
Margin="12,0,12,2"
VerticalAlignment="Center"
FontSize="{ThemeResource TextStyleLargeFontSize}"
Content="{Binding Header}" />
<StackPanel Grid.Column="1"
Visibility="{Binding IsSelected, Converter={StaticResource vc}}"
VerticalAlignment="Center"
HorizontalAlignment="Left">
<Path Data="M4,0 L0,8 L8,8 Z" Fill="White" Visibility="{Binding IsAscending, Converter={StaticResource vc}}"/>
<Path Data="M0,0 L4,8 L8,0 Z" Fill="White" Visibility="{Binding IsAscending, Converter={StaticResource nc}}"/>
</StackPanel>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</controls:DataGrid.Resources>
<controls:DataGrid.Style>
<StaticResource ResourceKey="DataGridStyle1"/>
</controls:DataGrid.Style>
<controls:DataGrid.RowStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsTabStop" Value="True"></Setter>
<Setter Property="Padding" Value="0,0,0,0"></Setter>
<Setter Property="Height" Value="35"></Setter>
</Style>
</controls:DataGrid.RowStyle>
<controls:DataGrid.Columns>
<controls:DataGridTextColumn Binding="{Binding SNumber}" Width="0.5*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<!--<Setter Property="MinHeight" Value="30"></Setter>-->
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<controls:DataGridTemplatedColumn CellTemplate="{StaticResource myCellTemplateMonth}" Width="2.5*" x:Name="ItemDesc" CanSort="False" IsAscendingDefault="True">
<!--<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.Resources>
<Storyboard x:Key="std" x:Name="std">
<ColorAnimation To="DarkTurquoise" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Storyboard.TargetName="lastnamePanel" />
</Storyboard>
</Grid.Resources>
<StackPanel x:Name="lastnamePanel" Background="Black">
<i:Interaction.Behaviors>
<Core:DataTriggerBehavior x:Name="desctrgr" Binding="{Binding description}" ComparisonCondition="Equal">
<Media:ControlStoryboardAction x:Name="mediaDesc" Storyboard="{StaticResource std}" />
</Core:DataTriggerBehavior>
</i:Interaction.Behaviors>
<TextBlock x:Name="lastnameTxt" Foreground="White" Text="{Binding description}" TextAlignment="Left" VerticalAlignment="Stretch" Margin="0,0,0,0"></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>-->
</controls:DataGridTemplatedColumn>
<controls:DataGridTextColumn Binding="{Binding uom}" Width="0.5*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,0,0,0"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<controls:DataGridTemplatedColumn Width="0.7*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="pricePanel" Height="30" Tapped="pricePanel_Tapped" >
<TextBlock Name="price" Foreground="White" Text='{Binding editedPrice}' TextAlignment="Center" VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTemplatedColumn Width="0.7*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="quantityPanel" Height="30" Tapped="quantityPanel_Tapped">
<TextBlock Name="quantity" TextAlignment="Center" Foreground="White" Text='{Binding quantity}' VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTemplatedColumn Width="0.6*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="discountPanel" Height="30" Tapped="discountPanel_Tapped" >
<TextBlock Name="Discount" TextAlignment="Center" Foreground="White" Text='{Binding discount}' VerticalAlignment="Center" Margin="10,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTextColumn Binding="{Binding cartTotal}" Width="0.85*" CanSort="False" Foreground="White">
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="-40,0,0,0"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<!--delete image column-->
<controls:DataGridTemplatedColumn CanSort="False">
<!--<controls:DataGridTemplatedColumn.Header>
<Image Source="/Images/erase.png" Height="40" Width="40" Grid.Column="7" Margin="5"></Image>
</controls:DataGridTemplatedColumn.Header>-->
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel x:Name="voidImagePanel" Height="30" Tapped="voidImagePanel_Tapped">
<Image x:Name="VoidImage" Source="{Binding imageUrl}" Height="20" Width="30" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-20,5,0,0"></Image>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
</controls:DataGrid.Columns>
</controls:DataGrid>
</ScrollViewer>
</Border>

You need to remove the margin="12" of ContentPresenter in x:Key="DataGridStyle1" :
Now the it looks like this:
You can slightly modify the margins of your element in DataGridTemplatedColumn.CellTemplate to let the items stay in center of the row:

How to remove the header of MyToolkit Datagrid?

I am using MyToolkit DataGrid in my windows app found here https://github.com/MyToolkit/MyToolkit/wiki/DataGrid. I want to remove the header from the datagrid. How can I do this?
Can Any one tell me...
Thanks In advance.
Here is my code
<controls:DataGrid.RowStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="Height" Value="35"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
</Style>
</controls:DataGrid.RowStyle>
<controls:DataGrid.Columns>
<controls:DataGridTextColumn Binding="{Binding SNumber}" Width="0.5*" CanSort="False" Foreground="White">
<!--<controls:DataGridTextColumn.Header>
<Button x:Name="btnSl" x:Uid="RSNO" Style="{StaticResource ButtonStyle1}" Background="DarkTurquoise" Margin="0,0,0,0" ></Button>
</controls:DataGridTextColumn.Header>-->
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<controls:DataGridTemplatedColumn CellTemplate="{StaticResource myCellTemplateMonth}" Width="2.5*" x:Name="ItemDesc" CanSort="False" IsAscendingDefault="True">
</controls:DataGridTemplatedColumn>
<controls:DataGridTextColumn Binding="{Binding uom}" Width="0.5*" CanSort="False" Foreground="White">
<!--<controls:DataGridTextColumn.Header>
<Button x:Name="btnUOM" x:Uid="uom" Style="{StaticResource ButtonStyle1}" Grid.Column="2" Background="DarkTurquoise"></Button>
</controls:DataGridTextColumn.Header>-->
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,0,0,0"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<controls:DataGridTemplatedColumn Width="0.7*" CanSort="False">
<!--<controls:DataGridTextColumn.Header>
<Button x:Name="bPrice" x:Uid="ItemPrice" Style="{StaticResource ButtonStyle1}" Grid.Column="3" Background="DarkTurquoise"></Button>
</controls:DataGridTextColumn.Header>-->
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="pricePanel" Height="30" Tapped="pricePanel_Tapped" >
<TextBlock Name="price" Foreground="White" Text='{Binding editedPrice}' TextAlignment="Center" VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTemplatedColumn Width="0.7*" CanSort="False">
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="quantityPanel" Height="30" Tapped="quantityPanel_Tapped">
<TextBlock Name="quantity" TextAlignment="Center" Foreground="White" Text='{Binding quantity}' VerticalAlignment="Center" Margin="0,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTemplatedColumn Width="0.6*" CanSort="False">
<!--<controls:DataGridTextColumn.Header>
<Button x:Name="btnDiscnt" x:Uid="Rdiscount" Style="{StaticResource ButtonStyle1}" Grid.Column="5" Background="DarkTurquoise" ></Button>
</controls:DataGridTextColumn.Header>-->
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel Name="discountPanel" Height="30" Tapped="discountPanel_Tapped" >
<TextBlock Name="Discount" TextAlignment="Center" Foreground="White" Text='{Binding discount}' VerticalAlignment="Center" Margin="10,5,0,0"></TextBlock>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
<controls:DataGridTextColumn Binding="{Binding cartTotal}" Width="0.85*" CanSort="False" Foreground="White">
<!--<controls:DataGridTextColumn.Header>
<Button x:Name="btnCost" x:Uid="ItemCost" Style="{StaticResource ButtonStyle1}" Grid.Column="6" Background="DarkTurquoise"></Button>
</controls:DataGridTextColumn.Header>-->
<controls:DataGridTextColumn.Style>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="-40,0,0,0"></Setter>
</Style>
</controls:DataGridTextColumn.Style>
</controls:DataGridTextColumn>
<!--delete image column-->
<controls:DataGridTemplatedColumn CanSort="False">
<!--<controls:DataGridTemplatedColumn.Header>
<Image Source="/Images/erase.png" Height="40" Width="40" Grid.Column="7" Margin="5"></Image>
</controls:DataGridTemplatedColumn.Header>-->
<controls:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<StackPanel x:Name="voidImagePanel" Height="30" Tapped="voidImagePanel_Tapped">
<Image x:Name="VoidImage" Source="/Images/delete.png" Height="20" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="-20,5,0,0"></Image>
</StackPanel>
</DataTemplate>
</controls:DataGridTemplatedColumn.CellTemplate>
</controls:DataGridTemplatedColumn>
</controls:DataGrid.Columns>
</controls:DataGrid>
</ScrollViewer>
here I dont want the header. but I am getting empty space. how can I remove that.

here I don't want the header. but I am getting empty space. how can I remove that.
I have checked the source code of MyToolkit, the only way is to modify the default template for DataGrid and set the ColumnHeaders element's Visibility property to Collapsed:
Firstly, adding these two xaml prefixes:
xmlns:controls="using:MyToolkit.Controls"
xmlns:Converters="using:MyToolkit.Converters"
Secondly, appending the following style and assign to DataGrid:
<controls:DataGrid.Resources>
<Converters:VisibilityConverter x:Key="vc" />
<Converters:NotConverter x:Key="nc" />
<!-- TransparentListBox -->
<Style x:Key="TransparentListBox" TargetType="ListBox">
<Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="ScrollViewer"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DataGridStyle1" TargetType="controls:DataGrid">
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="HeaderBackground" Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
<Setter Property="RowBackgroundOddBrush" Value="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
<Setter Property="CellTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Margin="12" Content="{Binding Control}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:DataGrid">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Visibility="Collapsed" Background="{TemplateBinding HeaderBackground}" Height="40" x:Name="ColumnHeaders">
<!-- HACK: Needed so that column DPs are working when adding columns in code only. -->
<ContentPresenter>
<controls:DataGridTextColumn />
</ContentPresenter>
</Grid>
<controls:MtListBox BorderThickness="0" Grid.Row="1"
ItemContainerStyle="{TemplateBinding RowStyle}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
Style="{StaticResource TransparentListBox}"
Margin="0" x:Name="Rows" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"
Margin="12,0,12,2"
VerticalAlignment="Center"
FontSize="{ThemeResource TextStyleLargeFontSize}"
Content="{Binding Header}" />
<StackPanel Grid.Column="1"
Visibility="{Binding IsSelected, Converter={StaticResource vc}}"
VerticalAlignment="Center"
HorizontalAlignment="Left">
<Path Data="M4,0 L0,8 L8,8 Z" Fill="White" Visibility="{Binding IsAscending, Converter={StaticResource vc}}"/>
<Path Data="M0,0 L4,8 L8,0 Z" Fill="White" Visibility="{Binding IsAscending, Converter={StaticResource nc}}"/>
</StackPanel>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</controls:DataGrid.Resources>
<controls:DataGrid.Style>
<StaticResource ResourceKey="DataGridStyle1"/>
</controls:DataGrid.Style>
Screenshot:
Check my completed demo here

WPF Progressbar with images and fill effect

I'd like to create custom progressbar style that will display image filling up from bottom.
I've created two images, background:
and foreground:
Idea is to create something like this:
Inside Blend I've created this style:
<Style x:Key="ImageFill" TargetType="{x:Type ProgressBar}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
<Image x:Name="PART_Track" Source="Play_Background.png" Margin="1" Stretch="Fill"/>
<Rectangle x:Name="PART_Indicator" Margin="1" HorizontalAlignment="Left" Fill="#FFD6931C">
<Rectangle.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0.87"/>
<GradientStop Color="Transparent" Offset="0.87"/>
</RadialGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<Image Source="Play_Foreground.png" Margin="1" Stretch="Fill"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But when setting value to something like 60 I get this:
I can change OpacitMmask to this:
<RadialGradientBrush Center="106,104" GradientOrigin="60,60" MappingMode="Absolute" RadiusY="97" RadiusX="98">
<GradientStop Color="Black" Offset="0.87"/>
<GradientStop Color="Transparent" Offset="0.87"/>
</RadialGradientBrush>
but then when I resize my progress bar I get unwanted behaviour:
How this can be fixed? I need mask to have MappingMode set to RelativeToBoundingBox so I can set different size to progressbar.
Below is full XAML I've generated in Blend:
<Window x:Class="ImageProgressBar.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="389" Width="523">
<Window.Resources>
<Style x:Key="ImageFill" TargetType="{x:Type ProgressBar}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
<Image x:Name="PART_Track" Source="Play_Background.png" Margin="1" Stretch="Fill"/>
<Rectangle x:Name="PART_Indicator" Margin="1" HorizontalAlignment="Left" Fill="#FFD6931C">
<Rectangle.OpacityMask>
<RadialGradientBrush Center="106,104" GradientOrigin="60,60" MappingMode="Absolute" RadiusY="97" RadiusX="98">
<GradientStop Color="Black" Offset="0.87"/>
<GradientStop Color="Transparent" Offset="0.87"/>
</RadialGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<Image Source="Play_Foreground.png" Margin="1" Stretch="Fill"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ProgressBar
Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}"
HorizontalAlignment="Left" Height="200" Margin="10,10,0,0" VerticalAlignment="Top" Width="200" Style="{DynamicResource ImageFill}"/>
<ProgressBar
Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}"
HorizontalAlignment="Left" Height="100" Margin="294,10,0,0" VerticalAlignment="Top" Width="100" Style="{DynamicResource ImageFill}"/>
<Slider Name="MySlider" HorizontalAlignment="Left" Margin="10,215,0,0" VerticalAlignment="Top" Width="200" Minimum="0" Maximum="100" Value="0"/>
</Grid>
</Window>
I've found http://vbcity.com/blogs/xtab/archive/2009/11/24/wpf-controltemplates-creating-a-non-rectangular-progressbar.aspx but can't use this inside my style.

I've managed to create style that has effect I wanted.
Below is how it looks:
and below is working code with style and slider to change value of progressbar:
<?xml version="1.0" encoding="UTF-8"?>
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ImageProgressBar.MainWindow" Title="ProgressBar Image Fill" Height="284" Width="598" Background="#FFEAE0E0">
<Window.Resources>
<Style x:Key="ImageFill" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
<Image x:Name="PART_Track" Source="Play_Background.png" Margin="1" Stretch="Fill" />
<Rectangle x:Name="PART_Indicator" Margin="1" HorizontalAlignment="Left" Fill="{TemplateBinding Foreground}">
<Rectangle.OpacityMask>
<RadialGradientBrush Center="106,104" GradientOrigin="60,60" MappingMode="Absolute" RadiusY="97" RadiusX="98">
<GradientStop Color="Black" Offset="0.87" />
<GradientStop Color="Transparent" Offset="0.87" />
</RadialGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<Image Source="Play_Foreground.png" Margin="1" Stretch="Fill" />
</Grid>
<ControlTemplate.Triggers>
<!-- Getting vertical style working using technique described here: http://stackoverflow.com/a/6849237/7532 -->
<Trigger Property="Orientation" Value="Vertical">
<Setter TargetName="PART_Indicator" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Indicator" Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
<Setter TargetName="PART_Indicator" Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
<Setter TargetName="PART_Indicator" Property="VerticalAlignment" Value="Bottom" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SimpleImageFill" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
<Image x:Name="PART_Track" Source="Play_Game_Empty.png" />
<Canvas ClipToBounds="True" x:Name="PART_Indicator" HorizontalAlignment="Left">
<Image x:Name="Image_Fill" Source="Play_Game_Fill.png"
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter TargetName="PART_Indicator" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270" />
</Setter.Value>
</Setter>
<Setter TargetName="Image_Fill" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-270" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Indicator" Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
<Setter TargetName="PART_Indicator" Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
<Setter TargetName="PART_Indicator" Property="VerticalAlignment" Value="Bottom" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ProgressBar Foreground="Orange" Orientation="Vertical" Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}" HorizontalAlignment="Left" Height="200" Margin="10,10,0,0" VerticalAlignment="Top" Width="200" Style="{DynamicResource ImageFill}" />
<ProgressBar Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}" HorizontalAlignment="Left" Height="200" Margin="227.5,10,0,0" VerticalAlignment="Top" Width="200" Style="{DynamicResource ImageFill}" />
<Slider Name="MySlider" HorizontalAlignment="Left" Margin="10,215,0,0" VerticalAlignment="Top" Width="200" Minimum="0" Maximum="100" Value="0" />
<ProgressBar Orientation="Vertical" Maximum="{Binding ElementName=MySlider, Path=Maximum, Mode=TwoWay}" Minimum="{Binding ElementName=MySlider, Path=Minimum, Mode=TwoWay}" Value="{Binding ElementName=MySlider, Path=Value, Mode=TwoWay}" HorizontalAlignment="Left" Height="150" Margin="432.5,10,0,0" VerticalAlignment="Top" Width="150" Style="{DynamicResource SimpleImageFill}" />
</Grid>
</Window>
I've actually created two styles:
First one is using two images (top two from my question) and circle
between them. Idea was to fill circle from bottom or from left.
Circle is filled with foreground color.
Second is much simpler, it uses only two images (empty and filled). When value changes filled image, that is on top of empty, is shown from left or from bottom. I've used canvas that is filled with image and I change it width or height.
I'm just starting with WPF, so is someone knows a better solution please post answer.
Below I'm adding two images used by second style applied to third progressbar.

Check this out WPF: Anchor points don't work well sometimes The problem is that your sizing and margins are absolutes not relative the the size of your control.

wpf expander inside list not always execute command when checked

i'm trying to make a list of expanders, while only one expander is selected..
Now i've overrided the expander to look as i wanted to be.
In the header i've got ToggleButton, which i binded Command to it.
basicly i want to do an action every time i expand an expander from the list
So the list is that:
<ListBox ItemsSource="{Binding DeviceEvents}" Style="{DynamicResource EventsList}"/>
The list style:
<Style TargetType="ListBoxItem" x:Key="listboxEventitemDisableBackground">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter Margin="0,0,0,6"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EventsList" TargetType="{x:Type ListBox}" BasedOn="{StaticResource BaseListProps}">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle" Value="{StaticResource listboxEventitemDisableBackground}"/>
</Style>
Now, each object in the list binded to ViewModel, which described this way:
<Expander Name="check" Margin="0,0,0,0" Header="Test" Style="{StaticResource EventTileExpander}">
<StackPanel>
Some Content...
</StackPanel>
</Expander>
The Important part is in this style: (on the MarkAsReadCommand binding)
<Style x:Key="EventTileExpander" TargetType="{x:Type Expander}">
<Setter Property="FontFamily" Value="Helvetica Neue LT Std Light"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="IsExpanded" Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid VerticalAlignment="Top" Name="ExpanderBorder" Background="#51000000">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton Content="{TemplateBinding Header}"
Template="{DynamicResource AnimatedExpanderTemplate}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Command="{Binding MarkAsReadCommand}"/>
<ContentPresenter x:Name="ExpanderContent" ContentSource="Content" Grid.Row="1" Margin="10,-13,0,0">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleY="0"/>
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Expand out -->
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)"
Storyboard.TargetName="ExpanderContent" >
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuarticEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Shrink in -->
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)"
Storyboard.TargetName="ExpanderContent" >
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuarticEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The inner template of the ToggleButton:
<ControlTemplate x:Key="AnimatedExpanderTemplate" TargetType="{x:Type ToggleButton}">
<Grid Name="GridContent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Control Template="{DynamicResource Clock4Icon}" VerticalAlignment="Top" Margin="15,15,15,10"/>
<TextBlock Text="{Binding EventTime}" HorizontalAlignment="Center" FontSize="13" FontFamily="Helvetica Neue LT Std 47 Light" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding EventTitle}" Foreground="{DynamicResource EventOrange}" Margin="0,15,0,0" FontSize="15" FontFamily="Helvetica Neue LT Std 47 Condensed"/>
<TextBlock Text="{Binding EventHeaderMessage}" TextWrapping="WrapWithOverflow" Foreground="White" Margin="0,5,10,0" FontSize="12" FontFamily="Helvetica Neue LT Std 47 Light Condensed" Opacity="0.9"/>
</StackPanel>
</Grid>
</ControlTemplate>
So i basicly tried many things to make it work, but no success..
i don't know why only somethings the command executed (there is not condition to the command).
i use RelayCommand by Mvvm Light..
it's like the click not always catches by the control..
any help would be appreciated.

I would suspect it is to do with your animations. Could it be that while they are expanding in/out there is effectively no background to capture the mouse clicks?

Categories

Resources