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>
Related
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'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 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>
I have a Template defined for Silverlight DataPager control with a CombboBox with PageSize values
Template:
<Style TargetType="sdk:DataPager">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataPager">
<Grid x:Name="Root" Background="Transparent">
<Border BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" MinHeight="24" Padding="{TemplateBinding Padding}" VerticalAlignment="Bottom">
<StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Orientation="Horizontal" VerticalAlignment="Stretch">
<Button x:Name="FirstPageButton" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" HorizontalAlignment="Right" Height="20" Padding="1" Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Width="20" Margin="0,0,3,0">
<Grid Height="9" Width="8">
<Path Data="M0,1 L1,0 L1,2 Z" HorizontalAlignment="Right" Height="9" Stretch="Fill" Width="5" Fill="White"/>
<Rectangle HorizontalAlignment="Left" Width="2" Fill="White"/>
</Grid>
</Button>
<Button x:Name="PreviousPageButton" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" HorizontalAlignment="Right" Height="20" Padding="1" Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Width="20" Margin="0,0,3,0">
<Path Data="M0,1 L1,0 L1,2 Z" HorizontalAlignment="Center" Height="9" Stretch="Fill" Width="5" Fill="White"/>
</Button>
<Border x:Name="Separator1" BorderThickness="1,0,1,0" Margin="0, 3" Width="1" BorderBrush="#FF747474"/>
<StackPanel x:Name="NumericButtonPanel" Margin="1" Orientation="Horizontal"/>
<StackPanel x:Name="PageSizeDisplay" Orientation="Horizontal">
<ComboBox SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PageSize, Mode=TwoWay}"
SelectedValuePath="Content" Width="60" Margin="3"
BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}">
<ComboBoxItem Content="10"></ComboBoxItem>
<ComboBoxItem Content="20" IsSelected="True"></ComboBoxItem>
<ComboBoxItem Content="50"></ComboBoxItem>
<ComboBoxItem Content="100"></ComboBoxItem>
<ComboBoxItem Content="200"></ComboBoxItem>
</ComboBox>
</StackPanel>
<StackPanel x:Name="PageDisplay" Orientation="Horizontal">
<TextBlock x:Name="CurrentPagePrefixTextBlock" Foreground="{TemplateBinding Foreground}" Margin="4,0,0,0" VerticalAlignment="Center" Width="Auto"/>
<TextBox x:Name="CurrentPageTextBox" BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}" Height="Auto" Margin="4,2,4,2" Style="{StaticResource TextBoxStyle1}" TextWrapping="Wrap" VerticalAlignment="Center" Width="40"/>
<TextBlock x:Name="CurrentPageSuffixTextBlock" Foreground="{TemplateBinding Foreground}" Margin="0,0,4,0" VerticalAlignment="Center" Width="Auto"/>
</StackPanel>
<Border x:Name="Separator2" BorderThickness="1,0,1,0" Margin="0,3" Width="1" BorderBrush="#FF747474"/>
<Button x:Name="NextPageButton" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" HorizontalAlignment="Right" Height="20" Padding="1" Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Width="20" Margin="3,0">
<Path Data="M0,0 L1,1 L0,2 Z" HorizontalAlignment="Center" Height="9" Stretch="Fill" Width="5" Fill="White"/>
</Button>
<Button x:Name="LastPageButton" BorderBrush="{StaticResource BorderBrushColor}" BorderThickness="1" Background="{StaticResource BackgroundColor}" Foreground="{StaticResource ForegroundColor}" HorizontalAlignment="Right" Height="20" Padding="1" Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Width="20">
<Grid Height="9" Width="8">
<Path Data="M0,0 L1,1 L0,2 Z" HorizontalAlignment="Left" Height="9" Stretch="Fill" Width="5" Fill="White"/>
<Rectangle HorizontalAlignment="Right" Width="2" Fill="White"/>
</Grid>
</Button>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage:
<sdk:DataPager x:Name="pager" Source="{Binding Path=ItemsSource, ElementName=myGrid}" PageSize="50" />
My DataGrid is bound to a PagedCollectionView, but still the PageSize ComboBox doesn't display the correct value. (if IsSelected property is not set, there is no selected item in the ComboBox)
I have also tried setting the PageSize property of the PagedCollectionView, that doesn't help either.
Any idea what am I doing wrong?
You are trying to bind ComboBoxItem values with int32 values.
try this instead:
<ComboBox SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PageSize, Mode=TwoWay}"
Width="60" Margin="3"
BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}">
<sys:Int32>10</sys:Int32>
<sys:Int32>20</sys:Int32>
<sys:Int32>50</sys:Int32>
Also add the following namespace:
xmlns:sys="clr-namespace:System;assembly=mscorlib"