I have a grid of TextBox inside a Border with the content binded like so
<Border BorderBrush="White" BorderThickness="1" Margin="0">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Column="1">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Column="2">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[0][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="0">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="1">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="1" Grid.Column="2">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[1][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="0">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][0], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="1">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][1], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
<Border BorderBrush="White" BorderThickness="1" Margin="0" Grid.Row="2" Grid.Column="2">
<TextBlock TextWrapping="Wrap" FontSize="29.333" Text="{Binding TextArray[2][2], Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Border>
This is fine for a small grid, but there would a lot of copy pasting and replacing values for a big grid. Is there a better way to do this?
Easy solution, stop using those crazy TextArrays. Let's pretend you really do have an array like you are showing. Why not make your life easier?
Start with simplifying your data!
string[][] _Data = new[]
{
new string[] { "A", "B", "C" },
new string[] { "1", "2", "3" }
};
var _NewData =
from d in _Data
select new
{
One = d[0],
Two = d[1],
Three = d[2]
};
this.DataContext = _NewData;
Then you can simplify your XAML:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="600">
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Margin" Value="0" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="FontSize" Value="29.333" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- first record -->
<Border Grid.Column="0">
<TextBlock Text="{Binding One}" />
</Border>
<!-- second record -->
<Border Grid.Column="1">
<TextBlock Text="{Binding Two}" />
</Border>
<!-- third record -->
<Border Grid.Column="2">
<TextBlock Text="{Binding Three}" />
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Now there is ZERO redundancy. The XAML was meant to be used.
Best of luck!
Why not use, DataGrid for WinRT - there are alot of datagrid's available for WinRT from Third Party something like Syncfusion Offers you can check here.
http://darkcore.in/getting-started-in-syncfusions-datagrid-sfdatagrid-for-winrt/
Related
There is a list in which the item style is overridden as a TabControl with multiple buttons on individual TabItems.
How to specify in the button parameters to change the SelectedIndex of the parent element, thereby switching to another menu?
I do to simulate a multi-level context menu for list items.
the standard context menu in ListBox does not suit me
<ListBox.Resources>
<DataTemplate DataType="{x:Type econemodels:DishDTOAdvance}">
<StackPanel>
<Grid Width="280">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="16"
Foreground="Black"
TextTrimming="CharacterEllipsis"
Width="230">
<Run Text="{Binding Quantity}" />
<Run Text="x" />
<Run Text="{Binding DishDTO.Name}" />
</TextBlock>
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="16"
Foreground="Black"
Text="{Binding DishDTO.CostPrice}"
Margin="0,0,10,0" />
<TabControl Name="designerContent"
Visibility="Collapsed"
Grid.Row="1"
Background="Transparent"
BorderThickness="0">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem"></ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#FF5DDF5D"
Command="{Binding RelativeSource={RelativeSource
AncestorType={x:Type
local:OrderDish}}, Path=DataContext.AddEditDish}" CommandParameter="{Binding}">
<Button.Content>
<Label Foreground="White">[Edit]</Label>
</Button.Content>
</Button>
<Button Grid.Column="1"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#4577EE"
Command="{Binding Path=SelectedIndex,
RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabControl}
}
}"
CommandParameter="1">
<Button.Content>
<Label Foreground="White">[Move]</Label>
</Button.Content>
</Button>
<Button Grid.Column="2"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#EE4545"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:OrderDish}},
Path=DataContext.DeleteDish}"
CommandParameter="{Binding}">
<Button.Content>
<Label Foreground="White">[Delete]</Label>
</Button.Content>
</Button>
</Grid>
</TabItem>
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Background="Black"
Height="40"
BorderThickness="0">Back</Button>
<Button Grid.Column="1"
Background="Red"
Height="40"
BorderThickness="0">Next</Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBoxItem}},
Path=IsSelected}"
Value="True">
<Setter TargetName="designerContent"
Property="Visibility"
Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate></ListBox.Resources>
In this button
<Button Grid.Column="1"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#4577EE"
Command="{Binding Path=SelectedIndex,
RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabControl}
}
}"
CommandParameter="1">
<Button.Content>
<Label Foreground="White">[Move]</Label>
</Button.Content>
</Button>
I have a round-cornered border and I am trying to make its contents to be also round-cornered but my attempts are not working. Basically I am doing a kind of custom MessageBox but simpler, only with one image icon, a text and a button. No title bar. Image icon is changing depending on the type of message.
Stackpanel corners overlaps over border so border corners are not showing rounded.
ATTEMPT #1:
<Border x:Name="MyCustomMessageBox"
CornerRadius="5,5,5,5"
Grid.ZIndex="3"
Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
Width="auto" Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="DarkBlue" BorderThickness="1"
Background="White">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid Background="Blue">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="WhiteSmoke">
<Grid>
<Image VerticalAlignment="Center" HorizontalAlignment="Left"
Source="/Common.MyImages;component/Images/Info.png"
Height="48" Width="48" Margin="20,10">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="1">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
<TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
</TextBlock>
</StackPanel>
<Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0"
Click="btnCustomMessageBox_Click"
HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
</Grid>
</Border>
ATTEMPT #2:
As explained here, I have tried also but without success.
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MyCustomMessageBox}" />
</Grid.OpacityMask>
<!-- Here goes all the above border code -->
</Grid>
The following should solve your issue.
<Border x:Name="MyCustomMessageBox"
CornerRadius="5"
Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
Width="auto" Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="DarkBlue"
BorderThickness="1"
Background="blue">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid> <!-- removed the Background here. Only letting borders provide background. -->
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--
Added a border to fill the top part of the grid with the
whitesmoke color using a borderradius on the top.
Also note that the Background from the stackpanel was removed.
-->
<Border
Grid.Row="0" Grid.Column="0"
Name="mask"
Background="WhiteSmoke"
CornerRadius="5,5,0,0"
/>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Grid>
<Image VerticalAlignment="Center" HorizontalAlignment="Left"
Source="/Common.MyImages;component/Images/Info.png"
Height="48" Width="48" Margin="20,10">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="1">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
<TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
</TextBlock>
</StackPanel>
<Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0"
Click="btnCustomMessageBox_Click"
HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
</Grid>
</Border>
I have strange behaviour of my application. I display nine buttons in window but sometimes one or two buttons disappear. It isn't regular. Sometimes button contain one part(small rectangle or content).
App.xaml
<Application.Resources>
<Style TargetType="{x:Type Button}" x:Key="BiletButton1a">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="5" Color="Gray" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#E23817" HorizontalAlignment="Right" Height="133" Width="18"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}" x:Key="BiletButton1b">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="5" Color="Gray" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#E23817" HorizontalAlignment="Right" VerticalAlignment="Top" Height="67" Width="18"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}" x:Key="BiletButton2a">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="5" Color="Gray" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#239AD4" HorizontalAlignment="Right" Height="133" Width="18"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}" x:Key="BiletButton2b">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="5" Color="Gray" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#239AD4" HorizontalAlignment="Right" VerticalAlignment="Top" Height="67" Width="18"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Window1.xaml
<Button Style="{StaticResource BiletButton1a}" FontSize="30" HorizontalAlignment="Left" Margin="16,328,0,0" x:Name="button_ticket1a" Height="130" Width="226" Click="button_ticket1a_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Stretch" Name="tblock1a" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton1b}" FontSize="30" HorizontalAlignment="Left" Margin="16,492,0,0" x:Name="button_ticket1b" Height="130" Width="226" Click="button_ticket1b_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock1b" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2a}" FontSize="30" HorizontalAlignment="Left" Margin="267,330,0,0" x:Name="button_ticket2a" Height="130" Width="226" Click="button_ticket2a_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Stretch" Name="tblock2a" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2b}" FontSize="30" HorizontalAlignment="Left" Margin="267,492,0,0" x:Name="button_ticket2b" Height="130" Width="226" Click="button_ticket2b_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock2b" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2a}" FontSize="30" HorizontalAlignment="Left" Margin="521,330,0,0" x:Name="button_ticket3a" Height="130" Width="226" Click="button_ticket3a_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Stretch" Name="tblock3a" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2b}" FontSize="30" HorizontalAlignment="Left" Margin="521,492,0,0" x:Name="button_ticket3b" Height="130" Width="226" Click="button_ticket3b_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock3b" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2b}" FontSize="30" HorizontalAlignment="Left" Margin="267,654,0,0" x:Name="button_ticket2c" Height="130" Width="226" Click="button_ticket2c_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock2c" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton2b}" FontSize="30" HorizontalAlignment="Left" Margin="521,654,0,0" x:Name="button_ticket3c" Height="130" Width="226" Click="button_ticket3c_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock3c" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
<Button Style="{StaticResource BiletButton1b}" FontSize="30" HorizontalAlignment="Left" Margin="16,654,0,0" x:Name="button_ticket1c" Height="130" Width="226" Click="button_ticket1c_Click" VerticalAlignment="Top">
<Grid >
<TextBlock TextWrapping="Wrap" Width="auto" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center" Name="tblock1c" FontSize="14" FontFamily="verdana" FontWeight="Bold" ></TextBlock>
</Grid>
</Button>
</Grid>
I'm developing a WPF application with C#.
I've added a TreeView in a window with DataTemplate.
But I need some style triggers for this DataTemplates like MouseOver, IsFocused etc.
Can you help me with that?
Thank you for helping.
<TreeView
x:Name="twLayer"
Background="{x:Null}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
Padding="0"
SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
BorderThickness="0"
Cursor="Hand">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type loc:LayerItems}">
<Border Width="250" Height="38" BorderBrush="#FF383838" Background="#FF535353" BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" >
<StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
<Border BorderBrush="Black" BorderThickness="1" SnapsToDevicePixels="True">
<Border BorderBrush="White" BorderThickness="1" SnapsToDevicePixels="True">
<Image Width="30" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Source="silinecek/layerThumb.png" SnapsToDevicePixels="True" />
</Border>
</Border>
<TextBlock Text="{Binding Path=Name}" Margin="5,10,0,0" Foreground="White" SnapsToDevicePixels="True"/>
</StackPanel>
</Border>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type loc:ChannelItem}">
<Border Width="250" BorderBrush="#FF383838" Background="#FF535353" BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" >
<StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
<Border BorderThickness="1" BorderBrush="Black" VerticalAlignment="Center" SnapsToDevicePixels="True">
<Border BorderThickness="1" BorderBrush="White" SnapsToDevicePixels="True">
<Grid Width="16" Height="16" Background="{Binding Path=ChannelColor}" SnapsToDevicePixels="True"/>
</Border>
</Border>
<TextBlock Margin="5,3,0,0" Text="{Binding Path=Name}" Foreground="White" FontFamily="Calibri" SnapsToDevicePixels="True"/>
</StackPanel>
</Border>
</DataTemplate>
<DataTemplate DataType="{x:Type loc:EffectItem}">
<Border Width="250" Height="18" BorderBrush="#FF383838" Background="#FF535353" BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True">
<StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
<Image Width="10" Height="10" VerticalAlignment="Center" HorizontalAlignment="Left" Source="icons/iconFX.png" SnapsToDevicePixels="True"/>
<TextBlock Margin="6,0,0,0" Text="{Binding Path=Name}" Foreground="White" FontSize="10" FontFamily="Calibri" SnapsToDevicePixels="True"/>
</StackPanel>
</Border>
</DataTemplate>
</TreeView.Resources>
</TreeView>
You can add your Triggers into the TriggersCollection of a Style like this:
<HierarchicalDataTemplate DataType="{x:Type loc:LayerItems}">
<Border Width="250" Height="38" BorderBrush="#FF383838" Background="#FF535353" BorderThickness="1,0,1,1" Padding="2" OverridesDefaultStyle="True" >
<StackPanel Orientation="Horizontal" SnapsToDevicePixels="True">
<Border BorderBrush="Black" BorderThickness="1" SnapsToDevicePixels="True">
<Border BorderBrush="White" BorderThickness="1" SnapsToDevicePixels="True">
<Image Width="30" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Source="silinecek/layerThumb.png" SnapsToDevicePixels="True" />
</Border>
</Border>
<TextBlock Text="{Binding Path=Name}" Margin="5,10,0,0" Foreground="White" SnapsToDevicePixels="True"/>
</StackPanel>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="LightGreen" />
</Trigger>
<Trigger Property="IsFocused" Value="False">
<Setter Property="BorderBrush" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</HierarchicalDataTemplate>
You can do something similar on the root Border element in your other DataTemplate too. You can find out more from the Trigger Class page on MSDN.
you can use the VisualState like
<VisualStateManager.VisualStateGroups>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlNormalColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateManager.VisualStateGroups>
I need to increase the Height and Width of my images OnMouseOver which are placed in a StackPanel with orientation as horizontal so that the images span over my entire panel with a given size in my WPF window and that is what am unable to achieve. Please let me know if I am missing any math in my xaml attributes or anything wrong with my approach.
Thanks in advance.
The following is my xaml and later are my output images.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="245"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitleSlidesPanel" Grid.Row="0"
Orientation="Horizontal">
<StackPanel Orientation="Vertical"
Height="245"
Width="400" >
<Image x:Name="img1" VerticalAlignment="Top"
HorizontalAlignment="Left"
RenderOptions.BitmapScalingMode="HighQuality"
Style="{StaticResource imageStyle}"
MouseDown="Img1_OnMouseDown"
MouseUp="Img1_OnMouseUp">
</Image>
<CheckBox x:Name="Chkbox1"
Content="Image1"
Width="100"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left"
VerticalContentAlignment="Center"
FontSize="12"
Margin="0,5,0,0"
Foreground="Black"
Height="20">
</CheckBox>
</StackPanel>
<StackPanel Orientation="Vertical"
Height="245"
Width="400"
Margin="-400,0,0,0" >
<Image x:Name="Img2" VerticalAlignment="Top"
HorizontalAlignment="Right"
RenderOptions.BitmapScalingMode="HighQuality"
Style="{StaticResource imageStyle}"
MouseDown="Img2_OnMouseDown"
MouseUp="Img2_OnMouseUp" >
</Image>
<CheckBox x:Name="Chkbox2"
Content="Image2"
FontSize="12"
Margin="0,5,135,0"
HorizontalContentAlignment="Right"
HorizontalAlignment="Right"
VerticalContentAlignment="Center"
Foreground="Black"
Height="20">
</CheckBox>
</StackPanel>
</StackPanel>
</Grid>
<Style x:Key="imageStyle" TargetType="{x:Type Image}">
<Setter Property="Height" Value="100" />
<Setter Property="Width" Value="200" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Height" Value="245" />
<Setter Property="Width" Value="400" />
</Trigger>
</Style.Triggers>
</Style>
Try putting your style in the resources of either the stackpanel or the grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="245"/>
</Grid.RowDefinitions>
<Grid.Resources>
<Style x:Key="imageStyle" TargetType="{x:Type Image}">
<Setter Property="Height" Value="100" />
<Setter Property="Width" Value="200" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Height" Value="245" />
<Setter Property="Width" Value="400" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<StackPanel x:Name="TitleSlidesPanel" Grid.Row="0"
Orientation="Horizontal">
<StackPanel Orientation="Vertical"
Height="245"
Width="400" >
<Image x:Name="img1" VerticalAlignment="Top"
HorizontalAlignment="Left"
RenderOptions.BitmapScalingMode="HighQuality"
Style="{StaticResource imageStyle}"
MouseDown="Img1_OnMouseDown"
MouseUp="Img1_OnMouseUp">
</Image>
<CheckBox x:Name="Chkbox1"
Content="Image1"
Width="100"
HorizontalContentAlignment="Left"
HorizontalAlignment="Left"
VerticalContentAlignment="Center"
FontSize="12"
Margin="0,5,0,0"
Foreground="Black"
Height="20">
</CheckBox>
</StackPanel>
<StackPanel Orientation="Vertical"
Height="245"
Width="400"
Margin="-400,0,0,0" >
<Image x:Name="Img2" VerticalAlignment="Top"
HorizontalAlignment="Right"
RenderOptions.BitmapScalingMode="HighQuality"
Style="{StaticResource imageStyle}"
MouseDown="Img2_OnMouseDown"
MouseUp="Img2_OnMouseUp" >
</Image>
<CheckBox x:Name="Chkbox2"
Content="Image2"
FontSize="12"
Margin="0,5,135,0"
HorizontalContentAlignment="Right"
HorizontalAlignment="Right"
VerticalContentAlignment="Center"
Foreground="Black"
Height="20">
</CheckBox>
</StackPanel>
</StackPanel>
</Grid>