How to Remove the Pivot Header but Keep Functionality - xaml

In a previous question How to Change Pivot Header Template in Windows Phone 8 I retemplated the Pivot Header, but I was wondering how it would be possible to remove the headers all together, while maintaining the functionality of a PivotControl.

Here's a solution that I use for the same purpose, it works fine:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PivotStyle1" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<primitives:PivotHeadersControl x:Name="HeadersListElement" />
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PivotItemStyle1" TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</phone:PhoneApplicationPage.Resources>
<phone:Pivot x:Name="MyPivot"
Style="{StaticResource PivotStyle1}" ItemContainerStyle="{StaticResource PivotItemStyle1}">
<phone:Pivot.ItemTemplate>
<DataTemplate><!-- dummy content to show that no header is on the screen -->
<Border BorderBrush="Blue" BorderThickness="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid Background="Red" />
</Border>
</DataTemplate>
</phone:Pivot.ItemTemplate>
<!-- we need empty header template to hide the pivotitem title completely -->
<phone:Pivot.HeaderTemplate>
<DataTemplate />
</phone:Pivot.HeaderTemplate>
</phone:Pivot>

Related

UWP - SemanticZoom Header Height

I am currently implementing SemanticZoom for a Windows UWP app. As you may know, items will be grouped into different section (e.g. Group A, Group B, etc.)
The Group name will be the header.
I have changed the default style for SemanticZoom Group Header. Too bad I still can't figure out how to change the height of the header.
Screenshot:
The height of the header is too high for my taste
The Code for the custom SemanticZoom Style
<Style TargetType="GridViewHeaderItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Background" Value="#ff00fe"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="10"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Margin" Value="0 10 10 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML Code for the SemanticZoom
<SemanticZoom >
<SemanticZoom.ZoomedOutView>
<GridView>
...
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView>
<GridView.ItemTemplate>
....
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
Looking forward to your help.
There's couple properties you should set for your custom template: MinHeight and Padding.
The default GridViewHeaderItem template can be found from C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
From there you can find the things you should change:
Here's the full default style for GridViewHeaderItem.
<!-- Default style for Windows.UI.Xaml.Controls.GridViewHeaderItem -->
<Style TargetType="GridViewHeaderItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource GridViewHeaderItemThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0,0,0,4"/>
<Setter Property="Padding" Value="12,8,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{ThemeResource GridViewHeaderItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using listview instead of gridview,
you have to do three adjustment
1) change minheight and height
2) change the height of grid as highlighted below
3) change the textblock font size also highlighted
<Style x:Key="MyHeaderStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="30" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Margin" Value="0,10,10,0"/>
</Style>
and,
<SemanticZoom.ZoomedInView>
<ListView ItemsSource="{Binding Source={StaticResource Collection}}" ItemContainerStyle="{StaticResource MyHeaderStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
Change the height according to your requirement currently i set
to 30 looking fine also adjust font size of textblock
<!-- Adjust grid height -->
<Grid Name="AdjustmeGrid" Height="30" Margin="0,0,10,0" Width="370">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<!-- Adjust textblock fontsize -->
<TextBlock Name="AdjustmeTextblock" Grid.Column="1" Text="{Binding Title}" VerticalAlignment="Center" Foreground="Black" FontSize="28" />
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
Output

UWP Xaml GridViewItem: Remove margin

I want to create a grid of images without any margin between them. I tried to achieve this through a GridView. If there is an easier way, please let me know.
I found this answers on StackOverflow:
https://stackoverflow.com/a/10492464
https://stackoverflow.com/a/23817931/5739170
And ended up with this code:
<Page.Resources>
<Style x:Key="MyGridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter ContentMargin="0" Padding="0" Margin="0" BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<GridView ItemsSource="{x:Bind FieldList}" Margin="0,50,0,0" Padding="0" BorderThickness="0" ItemContainerStyle="{StaticResource MyGridViewItemStyle}" IsItemClickEnabled="True" ItemClick="OnItemClick">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Field">
<Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<TextBlock x:Name="text">Hallo!</TextBlock>
</StackPanel>
</Grid>
But there is still a margin left:
Screenshot
I have also tried to use negative margins but when I use them clicks aren't recognized correctly anymore.
How can I remove the margins?
Seems like the GridViewItem has a default MinWidth of 44px.
You can set it to 0 via your GridViewItemStyle:
<Setter Property="MinWidth" Value="0" />
EDIT: it also has a default MinHeight, you might want to set that to 0 as well.
The code below should work:
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0"/>
</Style>
</GridView.ItemContainerStyle>
Your code is good. If you add a Grid in the DataTemplate (with a Background), you will see there is no margin between grids :
<DataTemplate x:DataType="data:Field">
<Grid Background="Red">
<Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
</Grid>
</DataTemplate>
Your problem is the following : you set a fixed size for Image control wich all of them is in a container, but the container doesn't have a fixed, so images are centered in the container.
I see two solutions. First is to remove the fixed size for Image control and use Strecth property to fill correctly :
<DataTemplate x:DataType="data:Field">
<Image VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Stretch="UniformToFill"
Margin="0"
Source="{x:Bind ImagePath}"/>
</DataTemplate>
For the first solution, you must be sure of the filling behavior of the container. You can do something like :
<GridViewItemPresenter ContentMargin="0"
Padding="0"
Margin="0"
BorderThickness="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" />
The second solution is to set a fixed size on the container directly :
<Style x:Key="MyGridViewItemStyle"
TargetType="GridViewItem">
<Setter Property="Padding"
Value="0" />
<Setter Property="Margin"
Value="0" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter ContentMargin="0"
Padding="0"
Margin="0"
BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How do I remove ListView GroupStyle Header seperator line?

In ListViews on windows universal platform, there is an ugly seperator line below the group header, when you use ListView grouping. Even Microsoft themselves removed this line in their Apps. In the Live Visual Tree you can see that it is a rectangle in a GridViewHeaderItem. I've read that it's possible to set its height to 0. How can I do this?
Here's the code which sets the text of the header item:
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" >
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
You can find all the default styles in generic.xaml at
C:\Program Files (x86)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
Digging into that file, you'll find the default style for the ListViewHeaderItem as well:
<!-- Default style for Windows.UI.Xaml.Controls.ListViewHeaderItem -->
<Style TargetType="ListViewHeaderItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0,0,0,4"/>
<Setter Property="Padding" Value="12,8,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Simply copy over that style into your project's ResourceDictionary and remove the culprit Rectangle (so only the ContentPresenter is left as child element).
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>

How to create a rounded corner button in wpf from Styles?

most probably it could be duplicate but my question is different, i want to create a rounded close corner button in wpf UserControl from the styles. I don't know how can i achive this,
i tried as following.
<Style x:Key="dbokPopupCloseStyle" TargetType="Button">
<Setter Property="Padding" Value="5"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontFamily" Value="seoge UI"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#363636"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" Margin="10,5"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try this
<Window.Resources>
<DataTemplate x:Key="Cancel">
<Viewbox Height="20">
<Canvas Width="31.7872706291756" Height="31.7794719079896">
<Path Fill="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Data="F1M7.1874998,3.7803054C7.0081378,3.7608244,6.8412588,3.8140474,6.7187498,3.9365554L3.9374998,6.7178054C3.6924818,6.9628234,3.7577738,7.4130804,4.0624998,7.7178054L12.34375,15.999055 4.0624998,24.280305C3.7577728,24.585032,3.6924818,25.035288,3.9374998,25.280305L6.7187498,28.061555C6.9637678,28.306573,7.4140228,28.272532,7.7187498,27.967805L16,19.686555 24.28125,27.967805C24.585977,28.272532,25.036232,28.306573,25.28125,28.061555L28.0625,25.280305C28.307518,25.035287,28.242227,24.585033,27.9375,24.280305L19.65625,15.999055 27.9375,7.7178054C28.242227,7.4130784,28.307518,6.9628194,28.0625,6.7178054L25.28125,3.9365554C25.036232,3.6915374,24.585977,3.7568254,24.28125,4.0615554L16,12.342805 7.7187498,4.0615554C7.5663868,3.9091924,7.3668618,3.7997864,7.1874998,3.7803054z" Stroke="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" StrokeThickness="1"/>
</Canvas>
</Viewbox>
</DataTemplate>
<Style x:Key="Blue_Icon_Tooltipstyle" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Grid>
<Border CornerRadius="3" Background="Black">
<TextBlock Margin="5" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="12" >
<ContentPresenter></ContentPresenter>
</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse x:Name="ellipse" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="3"></Ellipse>
<ContentPresenter></ContentPresenter>
<Grid.ToolTip>
<ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
</Grid.ToolTip>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True" >
<Setter Property="Opacity" Value="0.7" ></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="Red" >
<Button Height="40" Width="40" ToolTip="Cancel" Style="{StaticResource CircularButton}" Background="Black" BorderThickness="1" BorderBrush="White" Foreground="White" ContentTemplate="{StaticResource Cancel}"></Button>
</Grid>
Update
<UserControl.Resources>
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse x:Name="ellipse"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontSize="20" Content="{TemplateBinding Content}"></ContentPresenter>
<Grid.ToolTip>
<ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
</Grid.ToolTip>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True" >
<Setter Property="Opacity" Value="0.7" ></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Background="Red" >
<Button Height="40" Width="40" ToolTip="Cancel"
Style="{StaticResource CircularButton}"
Background="Black" BorderThickness="1"
BorderBrush="White" Foreground="White" Content="x"></Button>
</Grid>

Add Xaml hyperlink to rectangle

I am trying to add a hyperlink to a xaml rectangle and it's not working. I tried adding hyperlink with a button and it works. How can I add hyperlink to a group of rectangle for the code below.
How to give Hyperlink for below Code
<Rectangle Fill="Red" HorizontalAlignment="Left" Height="38" Margin="1038,74,0,0" Stroke="Black" VerticalAlignment="Top" Width="426"/>
<TextBlock HorizontalAlignment="Left" Margin="1173,82,0,0" TextWrapping="Wrap" Text="Pending Sites " VerticalAlignment="Top" Height="24" Width="142" Foreground="#FFF7F6F1" FontSize="20" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="-0.098"/>
</TextBlock.RenderTransform>
</TextBlock>
Code I tried with Button which is working fine
<Button Content="Click to go to desc page" Click="Button_Click_1" Margin="62,376,0,357"/>
private void Button_Click_1(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(dPlanner2x.MyPageDetails));
}
Rather than trying to turn a Rectangle into a click-able object, you are much better off if you apply a Style to a Button.
An example of a Style to change the look of a Button is given below:
<Style x:Key="btnCommand" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="rct"
TextBlock.Foreground="White"
Background="DarkGray"
BorderBrush="DarkGray"
BorderThickness="1"
Cursor="Hand"
UseLayoutRounding="True"
SnapsToDevicePixels="True"
Margin="10"
Height="24"
MinWidth="75">
<ContentPresenter TextBlock.FontStyle="Segoe UI Semibold"
TextBlock.FontSize="14"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="rct"
Property="TextBlock.Foreground"
Value="DarkGray" />
<Setter TargetName="rct"
Property="Background"
Value="LightGray" />
<Setter TargetName="rct"
Property="BorderBrush"
Value="DarkGray" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="rct"
Property="TextBlock.Foreground"
Value="DarkGray" />
<Setter TargetName="rct"
Property="Background"
Value="White" />
<Setter TargetName="rct"
Property="BorderBrush"
Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Obviously, you will want something that looks completely different, but the Style template above can be easily modified to fit your needs.