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?
Related
Apologies if i miss anything out I am new to this, also the state of my code(Jr Developer in the making). I am trying to create a style in the resource dictionary that will do the following:
Be able to apply to all buttons.
Change from a white icon png to blue icon png.
and have this done ideally in the resource dictionary but open to other ways.
Any help would be greatly appreciated :)
here is my app.xaml code;
<Style x:Key="SideMenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource bmBlue}" />
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Cairo"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="10 20 10 0" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" >
<StackPanel Orientation="Horizontal">
<Image x:Name="image1" Visibility="Visible" MaxHeight="25" HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Source="C:\Users\PaulR\source\repos\eSuiteVer10\eSuiteVer10\Icons\BackIconBWblue.png"/>
<ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="BorderBrush.Color" To="#005389" />
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color" To="#fff"/>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Color" To="#005389" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="BorderBrush.Color" To="#fff" />
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color" To="#005389"/>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Color" To="#fff" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Here is the button Xaml;
<Button Click="NewQuote_Click" Style="{StaticResource SideMenuButton}" >
<StackPanel Orientation="Horizontal">
<Image Grid.Column="0" MaxHeight="25" HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Source="C:\Users\PaulR\source\repos\eSuiteVer10\eSuiteVer10\Icons\NewIconBlueWhitewhite.png"/>
<TextBlock Text="New" Grid.Column="1" HorizontalAlignment="Center" />
</StackPanel>
</Button>
Try this:
<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource= "\Images\ButtonImages\Image.png" Stretch="Uniform"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Background="Transparent">
<ContentPresenter></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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:
im using a button which contains a popup control. Now i want the popup control to align on top of the button and it should also be centered.
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="2" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Padding="{TemplateBinding Padding}" UseLayoutRounding="True">
<Grid>
<Popup x:Name="popup" Placement="Top" AllowsTransparency="True" PopupAnimation="Slide" HorizontalOffset="-7" IsOpen="False">
<DockPanel Width="55" Background="#01FFFFFF">
<Button x:Name="DeleteButton" DockPanel.Dock="Top" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle3}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="DeleteButton_Click" />
<Button x:Name="EditButton" DockPanel.Dock="Top" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle4}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="EditButton_Click" />
<Button x:Name="AddButton" DockPanel.Dock="Bottom" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle5}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="AddButton_Click" />
</DockPanel>
</Popup>
<Image x:Name="add_img" Source="img\menu.png" RenderOptions.BitmapScalingMode="Fant" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="True">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource HidePopup}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource ShowPopup}" />
<BeginStoryboard>
<Storyboard BeginTime="00:00:00.000" Duration="00:00:00.300">
<DoubleAnimation Storyboard.TargetName="add_img" Storyboard.TargetProperty="RenderTransform.Angle" From="0" To="180" BeginTime="00:00:00.000" Duration="00:00:00.200" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource HidePopup}" />
<BeginStoryboard>
<Storyboard BeginTime="00:00:00.000" Duration="00:00:00.300">
<DoubleAnimation Storyboard.TargetName="add_img" Storyboard.TargetProperty="RenderTransform.Angle" From="180" To="0" BeginTime="00:00:00.000" Duration="00:00:00.200" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code snippet works, but if I use another computer to compile my code, the popup isn't aligned anymore. Is there a better way to do this?
Have you forgotten set the PlacementTarget attribute of the Popup?
Hope that this helps:
<Popup ... PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"></Popup>
I have a datagrid that binds its data from SelectedItem of a TreeView.
The problem is how to auto hide the grid container using DataTrigger if the datagrid has no items ?
<Grid Name="grid1" Visibility="Visible">
<DataGrid Name="datagrid1" ItemsSource="{Binding ElementName=treeview1, Path=SelectedItem}"/>
</Grid>
I think this link may be helpful.
This data trigger worked for me:
<Style TargetType="{x:Type DataGrid}">
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}" Value="0">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
You could bind to the HasItems property of the datagrid. But since that property is a boolean type and the Grid.Visibility is a Visibility enum, you'd need to convert the boolean to enum. Luckily, there already is an out-of-the-box converter called BooleanToVisibilityConverter.
<Grid Name="grid1" Visibility="{Binding HasItems, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=datagrid1, Mode=OneWay}">
Not sure why you want to use a DataTrigger, but if you want to apply transitions when changing visibility, you could do so by styling the grid and adding a trigger for when Visibility=Visible, like so:
<Style x:Key="GridStyle1" TargetType="{x:Type Grid}">
<Style.Resources>
<Storyboard x:Key="StoryboardShow">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="{x:Null}">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="StoryboardHide">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="{x:Null}">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource StoryboardHide}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource StoryboardShow}"/>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
Then apply this style to the grid:
<Grid Name="grid1" Style="{DynamicResource GridStyle1}" Visibility="{Binding HasItems, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=datagrid1, Mode=OneWay}">
Check the data source in the code behind, during a page load event. If the data source is empty (according to your criteria), then set datagrid1.visible = false. For completeness sake, set it to true if you do find some data worth displaying.
<Style TargetType="{x:Type DataGrid}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="2"
CornerRadius="1"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<ScrollViewer x:Name="DG_ScrollViewer" Focusable="false">
<Grid>
<ItemsPresenter x:Name="ScroItemsPresenter" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<TextBlock x:Name="Block" Text="asd"></TextBlock>
</Grid>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding HasItems, RelativeSource={RelativeSource Self}}"
Value="True">
<Setter TargetName="Block" Property="Visibility" Value="Hidden"></Setter>
<Setter TargetName="ScroItemsPresenter" Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
HasItems:
noItems:
my problem is that i have three tab controls each with a listbox that has style for both the ListBox and the ItemContainerStyle, the styles are the same on all listboxes inside the tabs.
two of the tabs are databound using a CollectionViewSource.
The problem is as soon as i try to go into tab 2 i get an exception and i cant seem to find out where from (i tired enabling first chance exceptions as well and nothing )
playing around with it i found out that if i remove the ItemContainerStyle form the ListBox in tab two it no longer crashes. another way to stop it form crashing is not to have any items in the listbox. and another way is instead of using a CollectionViewSource
use a GetDefaultView() on the list and bind to that.
here are the lines i use to bind to the listboxes:
this.FListViewSource = (this.FindResource("FirstCollectionViewSource") as AutoRefreshCollectionViewSource);
this.FListViewSource.Source = this.FirstList;
this.FListView = (this.FListViewSource.View as ListCollectionView);
this.SListViewSource = (this.FindResource("SecondCollectionViewSource") as AutoRefreshCollectionViewSource);
this.SListViewSource.Source = testing;
this.SListView = (this.SListViewSource.View as ListCollectionView);
this is the XAML for the tab control :
<TabControl Width="Auto" Height="Auto">
<TabItem Header="tab 1">
<StackPanel Name =first_Panel" >
<ListBox Style="{StaticResource lb_ms}" ItemContainerStyle="{StaticResource black_lb}" Width="160" Name="first_lb"
ItemsSource="{Binding}" DisplayMemberPath="name" MinHeight="400" MaxHeight="500" ButtonBase.Click="lb_Click" Margin="5,0,5,0"/>
</StackPanel>
</TabItem>
<TabItem Header="tab 2">
<StackPanel Name ="second_Panel" DataContext="{Binding Source={StaticResource FirstCollectionViewSource}}" FlowDirection="LeftToRight" Background="#333333">
<ListBox ItemsSource="{Binding}" Style="{StaticResource lb_ms}" ItemContainerStyle="{StaticResource black_lb}" Width="160" Name="second_lb"
DisplayMemberPath="name" MinHeight="400" MaxHeight="500" ButtonBase.Click="lb_Click" Margin="5,0,5,0"/>
</StackPanel>
</TabItem>
<TabItem Header="Media">
</TabItem>
<TabItem Header="Domains">
<StackPanel Name ="third_Panel" DataContext="{Binding Source={StaticResource SecondCollectionViewSource}}" FlowDirection="LeftToRight" Background="#333333">
<ListBox Style="{StaticResource lb_ms}" ItemContainerStyle="{StaticResource black_lb}" Width="160" Name="third_lb"
ItemsSource="{Binding}" DisplayMemberPath="name" MinHeight="400" MaxHeight="400" ButtonBase.Click="lb_Click" Margin="5,0,5,0" SelectionMode="Multiple" />
</StackPanel>
</TabItem>
</TabControl>
this is the resource directory that contains the styles:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="black_lb" TargetType="{x:Type ListBoxItem}">
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="11" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Canvas Name="can" Width="Auto" Height="25">
<Rectangle Name="filler" Canvas.Top="0" Canvas.Left="0" Width="200" Height="25">
<Rectangle.Fill>
<SolidColorBrush x:Name="fillb" Color="#333333"/>
</Rectangle.Fill>
</Rectangle>
<Path d:LastTangent="0,0" Stroke="{x:Null}" Fill="#FF6E00" HorizontalAlignment="Right" VerticalAlignment="Top" Width="7" Height="7" Canvas.Left="15" Opacity="0" Canvas.Top="6" x:Name="Path" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Data="M601.11544,190.39485 L590.06202,213.0964 613,213">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<StackPanel Panel.ZIndex="1000" Name="ActionsContainer" Visibility="Hidden" Canvas.Right="0" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Name="btn_edit" FontSize="10" Content="Edit" Height="20" Width="Auto"/>
<Button Name="btn_delete" FontSize="10" Content="Delete" Height="20" Width="Auto"/>
</StackPanel>
<ContentPresenter Name="con" Canvas.Top="2" Canvas.Left="10"/>
<!--
<ContentPresenter Name="con" Content="{TemplateBinding ContentControl.Content}" />
<ContentControl Name="DesignerItem"
Canvas.Top="2"
Canvas.Left="10"
/>
-->
</Canvas>
<ControlTemplate.Resources>
<Storyboard x:Key="SelectedStory">
<ColorAnimation Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" From="#333333" To="#111111" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="con" Storyboard.TargetProperty="(Canvas.Left)" From="10" To="30" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Path.Opacity)" From="0" To="1" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Canvas.Left)" From="15" To="10" Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="unSelectedStory">
<ColorAnimation Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" From="#111111" To="#333333" Duration="0:0:0.8" />
<DoubleAnimation Storyboard.TargetName="con" Storyboard.TargetProperty="(Canvas.Left)" From="30" To="10" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Path.Opacity)" From="1" To="0" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Canvas.Left)" From="10" To="15" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="CurrentlySlecetedStory">
<ColorAnimation Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" From="#111111" To="#111111" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="con" Storyboard.TargetProperty="(Canvas.Left)" From="30" To="30" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Path.Opacity)" From="1" To="1" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Canvas.Left)" From="10" To="15" Duration="0:0:0.2" />
</Storyboard>
<SolidColorBrush x:Key="fillb" Color="#333333" />
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ListBoxItem.IsMouseOver" Value="True" />
<Condition Property="ListBoxItem.IsSelected" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="ActionsContainer" Property="Visibility" Value="{x:Static Visibility.Visible}"/>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ListBoxItem.IsMouseOver" Value="True" />
<Condition Property="ListBoxItem.IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Selector.IsSelected="True" Storyboard="{StaticResource SelectedStory}">
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource unSelectedStory}">
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Selected">
<EventTrigger.Actions>
<BeginStoryboard Name="SelectedItemStory" Storyboard="{StaticResource CurrentlySlecetedStory}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Unselected">
<EventTrigger.Actions>
<StopStoryboard BeginStoryboardName="SelectedItemStory" />
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="lb_ms" TargetType="ListBox">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="95"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border
Name="Border"
Background="#333333"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="5">
<ScrollViewer
Margin="0"
Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background"
Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush"
Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For it not to crash i had to add SelectionMode="Multiple" on the listbox that used the style, the question is why?