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>
Related
I have the code for the TabControl below. I want to achieve tab style similar to google chrome browser.
I want to make the bottom corners slightly rounder towards the pinkish background and not inwards.
How to set the rounded corners of TabItem to achieve the same effect as Google?
The resulting graph I have now：
Xmal:
<Window.Resources>
<SolidColorBrush x:Key="PrimaryBG" Color="#ad00ad"/>
<SolidColorBrush x:Key="Blueish" Color="#5252ff"/>
<SolidColorBrush x:Key="Greenish" Color="#005757"/>
<SolidColorBrush x:Key="Blackish" Color="#2e2e00"/>
<Style x:Key="{x:Type TabControl}" TargetType="{x:Type TabControl}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter ContentSource="SelectedContent"/>
</Border>
</Border>
</Border>
<TabPanel Grid.Row="0" IsItemsHost="true" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TabItem">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<!--In order to click on the blank part of the TabItem can be successfully selected-->
<Border Background="Transparent" >
<Grid>
<Grid x:Name="g">
<Border CornerRadius="5,5,7,7" Background="{TemplateBinding Background}" Margin="0,0,0,-1"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
</Grid>
<Border BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</Border>
<!--Add ControlTemplate.Triggers to change the background color of the selected TabItem.-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="{DynamicResource PrimaryBG}" Name="grid" >
<TabControl HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" Margin="0,0,0,0"
Name="tabControl1" VerticalAlignment="Top" >
<TabItem Header="Dashboard" Name="tabItem1" Background="{DynamicResource Blueish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">
<Border Background="#5252ff" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}">
<StackPanel>
<TextBox Width="200" Height="25"/>
<TextBox Width="200" Height="25"/>
</StackPanel>
</Border>
</TabItem>
<TabItem Header="Invoicing" Name="tabItem2" Background="{DynamicResource Greenish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">
<Border Background="#005757" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}" >
<Button Width="80" Height="25"/>
</Border>
</TabItem>
<TabItem Header="Transactions" Name="tabItem3" Background="{DynamicResource Blackish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0" >
<Border Background="#2e2e00" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}" >
<ComboBox Width="300" Height="25"/>
</Border>
</TabItem>
</TabControl>
</Grid>
Edit:
Is it possible to give a path of the red line in the figure?
You can create any shape by Path and place it both sides of tab. For example, such Path would be as follows.
<Path Width="20" Height="40" Stretch="Uniform" Fill="Blue"
StrokeThickness="2" Stroke="Red"
Data="M 20,40 L 0,40 0,40 C 4,40 10,36 10,30 L 10,10 C 10,0 16,0 20,0"/>
You can flip it by <ScaleTransform ScaleX="-1"/>.
Edit:
Edited Path. You can draw outline by Stroke and leave a segment open by removing Z.
I have popup error message box, it opens once the textbox is focused.
The issue when opening dialog window, if you click on the close button (on close I hide the window) the error message stays visible. I tried to add trigger to check the visibility but it didn't work. any idea?
XAML:
<ControlTemplate x:Key="errorToolTipTemplate">
<Grid>
<Border BorderBrush="#EF5B7C" BorderThickness="1" Background="#EF5B7C" Opacity="0.4" IsHitTestVisible="False" x:Name="errorBorder" />
<AdornedElementPlaceholder x:Name="placeholder" />
<Popup x:Name="popup" AllowsTransparency="True"
PopupAnimation="Fade"
Placement="Right"
VerticalOffset="-3"
PlacementTarget="{Binding ElementName=errorBorder}"
IsOpen="{Binding ElementName=placeholder, Path=AdornedElement.IsFocused, Mode=OneWay}">
<Popup.Style>
<Style TargetType="{x:Type Popup}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=errorBorder, Path=IsVisible, Mode=OneWay}" Value="False">
<Setter Property="IsOpen" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</Popup.Style>
<DockPanel>
<Polygon VerticalAlignment="Center"
Points="0,5 5,0 5,10"
Fill="#EF5B7C"
Stretch="Fill" />
<Border Background="White" BorderBrush="#EF5B7C" BorderThickness="1" CornerRadius="4" Padding="2">
<DockPanel>
<Image Height="20" Width="20" VerticalAlignment="Center" Source="Images/C04_32.png" />
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{StaticResource errorBrush}"
FontWeight="Bold" Margin="2,0,0,0"
Text="{Binding ElementName=placeholder, Path=AdornedElement.ToolTip, Mode=OneWay}" />
</DockPanel>
</Border>
</DockPanel>
</Popup>
</Grid>
</ControlTemplate>
<!--Textbox style-->
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate" Value="{DynamicResource errorToolTipTemplate}" />
</Style>
Fixed this by adding triggers for the ControlTemplate.
I have add trigger with SourceTarget as the adorner, and TargetName as the popup, and changed the IsOpen property according to the other control visibility.
<ControlTemplate x:Key="errorToolTipTemplate">
<Grid>
<Border BorderBrush="#EF5B7C" BorderThickness="1" Background="#EF5B7C" Opacity="0.4" IsHitTestVisible="False" x:Name="errorBorder" />
<AdornedElementPlaceholder x:Name="placeholder" />
<Popup x:Name="popup" AllowsTransparency="True"
PopupAnimation="Fade"
Placement="Right"
VerticalOffset="-3"
PlacementTarget="{Binding ElementName=errorBorder}"
IsOpen="{Binding ElementName=placeholder, Path=AdornedElement.IsFocused, Mode=OneWay}">
<DockPanel>
<Polygon VerticalAlignment="Center"
Points="0,5 5,0 5,10"
Fill="#EF5B7C"
Stretch="Fill" />
<Border Background="White" BorderBrush="#EF5B7C" BorderThickness="1" CornerRadius="4" Padding="2">
<DockPanel>
<Image Height="20" Width="20" VerticalAlignment="Center" Source="Images/C04_32.png" />
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{StaticResource errorBrush}"
FontWeight="Bold" Margin="2,0,0,0"
Text="{Binding ElementName=placeholder, Path=AdornedElement.ToolTip, Mode=OneWay}" />
</DockPanel>
</Border>
</DockPanel>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="placeholder" Property="IsVisible" Value="False">
<Setter TargetName="popup" Property="IsOpen" Value="False" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
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 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/
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>