Differences

This shows you the differences between two versions of the page.

--- swdev:dotnet:wpf:styles_and_triggers [2010/07/09 09:12]
127.0.0.1 external edit
+++ swdev:dotnet:wpf:styles_and_triggers [2011/04/27 14:30] (current)
smayr
@@ Line 41: / Line 41: @@
 Source: [[http://www.microsoft.com/belux/msdn/nl/community/columns/gillcleeren/wpf_stylesandtriggers.mspx|Styles and Triggers in WPF]]
+=== Style Tricks ===
+To use a parent property value, rather than a predefined value, use ''TemplateBinding'' + //PropertyName//. For example:
+<code xml>
+<Style...>
+  <Setter Property="Template">
+    <Setter.Value>
+       <ControlTemplate TargetType="{x:Type ListBox}">
+           <Border
+               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+               Background="{TemplateBinding Background}"
+               />
+               ...
+       </ControlTemplate>
+    </Setter.Value>
+  </Setter>
+</Style>
+</code>
+Restyle Datagrid's Checkbox column:
+<code xml>
+<UserControl.Resources>
+    <DataTemplate x:Key="MyCheckBoxTemplate">
+        <CheckBox Style="{StaticResource AnyResourceKeyInApplecation}"/>
+    </DataTemplate>
+</UserControl.Resources>
+<DataGrid x:Name="dataGrid" />
+</code>
+<code csharp>
+this.dataGrid.Columns.Add(new DataGridTemplateColumn{
+    CellTemplate=this.Resources["MyCheckBoxTemplate"] as DataTemplate});
+// OR this way:
+column2.ElementStyle = Application.Current.FindResource("MyCheckBoxStyle");
+</code>
 == Triggers ==
@@ Line 124: / Line 160: @@
 </Style>
 </code>
+== iPad-style Switch (using CheckBox) ==
+<code xml>
+<!--iPad style Switch-->
+<CheckBox
+     Grid.Column="0"
+     HorizontalAlignment="Center"
+     Margin="10"
+     VerticalAlignment="Center"
+     Content="Click Me"
+     FontSize="48" Width="200">
+    <CheckBox.Template>
+        <ControlTemplate TargetType="{x:Type CheckBox}">
+            <Viewbox>
+                <Border x:Name="borderMain" CornerRadius="20" BorderBrush="DarkGray" BorderThickness="3" Grid.ColumnSpan="3" Grid.RowSpan="3">
+                    <Grid Width="191" Height="50">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="0.25*"/>
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="0.35*"/>
+                            <ColumnDefinition Width="0.30*"/>
+                            <ColumnDefinition Width="0.35*"/>
+                        </Grid.ColumnDefinitions>
+                        <Rectangle x:Name="btnCheckBox" Grid.Column="0" Grid.ColumnSpan="2" Width="Auto" Height="Auto" RadiusY="20" RadiusX="20" StrokeThickness="5">
+                            <Rectangle.Fill>
+                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                                    <GradientStop Offset="1" Color="#FFDFDFDF"/>
+                                    <GradientStop Offset="0" Color="#FF7D7D7D"/>
+                                </LinearGradientBrush>
+                            </Rectangle.Fill>
+                            <Rectangle.Stroke>
+                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                                    <GradientStop Offset="0" Color="#FFA2A2A2"/>
+                                    <GradientStop Offset="1" Color="#FF535353"/>
+                                </LinearGradientBrush>
+                            </Rectangle.Stroke>
+                            <Rectangle.Effect>
+                                <DropShadowEffect Direction="240" ShadowDepth="3"/>
+                            </Rectangle.Effect>
+                        </Rectangle>
+                        <TextBlock Name="txtText" Grid.Column="2" Text="Off" FontSize="25" Margin="5" HorizontalAlignment="Center" />
+                    </Grid>
+                </Border>
+            </Viewbox>
+            <ControlTemplate.Triggers>
+                <Trigger Property="IsChecked" Value="true">
+                      <Setter TargetName="btnCheckBox" Property="Grid.Column" Value="1" />
+                      <Setter TargetName="txtMain" Property="Grid.Column" Value="0" />
+                      <Setter TargetName="txtMain" Property="Text" Value="On" />
+                      <Setter TargetName="borderMain" Property="Background" Value="SteelBlue" />
+                </Trigger>
+            </ControlTemplate.Triggers>
+        </ControlTemplate>
+    </CheckBox.Template>
+</CheckBox>
+</code>
+== Resources ==
+  * [[http://msdn.microsoft.com/en-us/library/ms745683.aspx|MSDN: Styling and Templating]]