How do I set the background color of a RadioButton? My RadioButton is in a simple grid. Thanks!
<RadioButton Name="Temp" Grid.Row="1" Grid.Column="0" GroupName="SetType" Content="Temporary Sets" Margin="60,0,0,0" Checked="Radio_Checked"
Background="Red" Foreground="White" />
To set the background of the Text, you should override the template of the RadioButton, to bind the Text container's Backgroud to the RadioButton's Background. Just try something like this:
<RadioButton Content="Temporary Sets" Background="Red" Foreground="White" >
<RadioButton.Template>
<ControlTemplate TargetType="{x:Type RadioButton}">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Grid>
<Ellipse Width="16" Height="16" Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}"/>
<Ellipse x:Name="Checked" Width="10" Height="10" Fill="Black" Visibility="Collapsed"/>
</Grid>
<Label Margin="5 0 0 0" Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Checked" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</RadioButton.Template>
</RadioButton>
Here is how I completed my RadioButton. Thanks Iron.
<ControlTemplate x:Key="RedRadio" TargetType="{x:Type RadioButton}">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Background="Transparent">
<Grid>
<Ellipse x:Name="TargetEllipse" Width="14" Height="14">
<Ellipse.Fill>
<SolidColorBrush x:Name="FillBrush" Color="#D4D4D4"/>
</Ellipse.Fill>
<Ellipse.Stroke>
<SolidColorBrush x:Name="StrokeBrush" Color="#434343"/>
</Ellipse.Stroke>
</Ellipse>
<Ellipse x:Name="CheckedEllipse" Width="8" Height="8" Fill="#444444" Visibility="Collapsed"/>
</Grid>
<Border CornerRadius="4" Margin="3 0 0 0" Padding="2 0 5 0"
Background="{TemplateBinding Background}">
<Label Margin="2 0 0 0"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"/>
</Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="FillBrush" Storyboard.TargetProperty="Color" To="#969696" Duration="0:0:0.01"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckedEllipse" Property="Visibility" Value="Visible"/>
<Setter TargetName="TargetEllipse" Property="Stroke" Value="#040404"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Related
I have used a custom data grid control that adds a TextBox to the column headers for filtering. Unfortunately, i have faced a problem when i tried to bind Visiblilty property of DataGridRow to Text property of TextBox (called filterTextBox); see the bellow code. The object received in the converter method "SearchColumnToVisibilityConverter" has the value "DependencyProperty.UnsetValue".
<ControlTemplate TargetType="{x:Type local:SimpuDataGrid}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Vertical" DataContext="{TemplateBinding DataContext}">
<TextBox Width="200" Margin="2" HorizontalAlignment="Left" x:Name="txtFullTextSearch"
Visibility="{TemplateBinding EnableFullTextSearch,
Converter={StaticResource BooleanToVisibilityConverter}}" />
<DataGrid x:Name="simpuGrid"
ItemsSource="{TemplateBinding ItemsSource}" CanUserAddRows="{TemplateBinding CanUserAddRows}"
CanUserDeleteRows="{TemplateBinding CanUserDeleteRows}"
AutoGenerateColumns="{TemplateBinding AutoGenerateColumns}">
<DataGrid.Resources>
<!--Custom Column Header template to show extra elements in the header-->
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<!--Let's keep the top section grid to contain the DataGridHeaderBorder, and left+right thumbs.-->
<Grid x:Name="fullHeader" Background="{StaticResource normalBrushBack}">
<!--Here is the theme based DataGridHeaderBorder. I've used Aero here.-->
<aero:DataGridHeaderBorder x:Name='HeaderBorder' SortDirection="{TemplateBinding SortDirection}" IsHovered="{TemplateBinding IsMouseOver}" IsPressed="{TemplateBinding IsPressed}" IsClickable="{TemplateBinding CanUserSort}" BorderThickness="0,0,1,1" BorderBrush="{TemplateBinding Foreground}" Background="Transparent" SeparatorVisibility="{TemplateBinding SeparatorVisibility}" SeparatorBrush="#FFC9CACA">
<!--We will put 3 elements inside the border: Content of header, a drop down button, and a sort order indicator.-->
<Grid Margin="0,0,0,0">
<Grid.RowDefinitions>
<!--For ContentPresenter-->
<RowDefinition Height="*" />
<!--For drop down button-->
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--For ContentPresenter-->
<ColumnDefinition Width="*" />
<!--For sort order indicator-->
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>
<!--Content of the header.-->
<ContentPresenter Grid.Row="0" Grid.Column="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" >
<ContentPresenter.Content>
<MultiBinding Converter="{StaticResource headerConverter}">
<MultiBinding.Bindings>
<Binding ElementName="filterTextBox" Path="Text" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Content" />
</MultiBinding.Bindings>
</MultiBinding>
</ContentPresenter.Content>
</ContentPresenter>
<!--A textbox filter-->
<TextBox x:Name="filterTextBox" Background="White" Grid.Row="1" Grid.ColumnSpan="2" />
<!--A sort order arrow icon.-->
<Path x:Name="SortArrow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Width="8" RenderTransformOrigin=".5,.5" Visibility="Visible" Fill="{TemplateBinding Foreground}" Stretch="Uniform" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z" />
</Grid>
</aero:DataGridHeaderBorder>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property='IsMouseOver' SourceName="fullHeader" Value='True'>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='1.0' />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='0' />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--End of custom DataGridColumnHeader template-->
</DataGrid.Resources>
<DataGrid.ItemContainerStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Visibility">
<Setter.Value>
<MultiBinding Converter="{StaticResource SearchColumnToVisibilityConverter}">
<Binding ElementName="filterTextBox" Path="Text"/>
<Binding BindsDirectlyToSource="True"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ItemContainerStyle>
</DataGrid>
</StackPanel>
</Border>
</ControlTemplate>
I hope someone could help me!
Thanks
So i have this "window" (not a Window but Grid):
Code:
<Grid Name="gridDeleteAllWindows">
<Grid.RowDefinitions>
<RowDefinition Height="110"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,0,0">
<Label Content="Delete All Files"
FontSize="20"
HorizontalAlignment="Center"
FontWeight="Bold"
Margin="0,0,0,0"/>
<Label Content="Are you sure you want to remove"
HorizontalAlignment="Center"
Margin="0,0,0,0"/>
<Label Content="all the files ?"
HorizontalAlignment="Center"
Margin="0,0,0,0"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Border BorderThickness="0,1,0,0" BorderBrush="#55B3B3B6">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125"/>
<ColumnDefinition Width="125"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="#55B3B3B6" BorderThickness="0,0,1,0" Grid.Column="0">
<Grid>
<Button Name="btnDeleteAllFilesYes"
Content="Yes"
FontSize="16"
Style="{StaticResource ButtonDefaultStyle}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Click="btnDeleteAllFilesYes_Click"
Margin="0,0,0,0"/>
</Grid>
</Border>
<Border BorderBrush="#55B3B3B6" BorderThickness="0,0,1,0" Grid.Column="1">
<Grid>
<Button Name="btnDeleteAllFilesNo"
Content="No"
FontSize="16"
Background="Transparent"
Style="{StaticResource ButtonDefaultStyle}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Click="btnDeleteAllFilesNo_Click"
Margin="0,0,0,0"/>
</Grid>
</Border>
</Grid>
</Border>
</Grid>
</Grid>
Style:
<Style x:Key="ButtonDefaultStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource MetroFlatButton}" >
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="#FF103766"/>
<Setter Property="Foreground" Value="Gainsboro"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="#FF6899D3"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border TextBlock.Foreground="{TemplateBinding Foreground}"
x:Name="Border"
CornerRadius="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}"
BorderThickness="1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
<VisualTransition GeneratedDuration="0" To="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And i want just to add another color into my Button while MouseEnter so i add this Trigger:
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
Result:
And as you can see that my rounded corner is now missing so i just need your help to fix it.
This is a sample gridview from the Telerik Demos, but I was wondering how you can removed these gridlines that appear after you group items.
Here is the Gridviewgroupstyle code im working through
<Style x:Key="GridViewGroupRowStyle1" TargetType="{x:Type telerik:GridViewGroupRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:GridViewGroupRow}">
<Grid x:Name="PART_GroupExpanderGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="PART_HeaderRow" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition x:Name="ContentRow" Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>1,1,0,0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="180"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ToggleButtonBorder" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Column="2" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border.Visibility>
<Binding Path="ShowHeaderAggregates" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter/>
</Binding.Converter>
</Binding>
</Border.Visibility>
<telerik:AggregateResultsList HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<telerik:AggregateResultsList.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</telerik:AggregateResultsList.ItemsPanel>
<telerik:AggregateResultsList.ItemTemplate>
<DataTemplate>
<telerik:GridViewAggregateResultCell AggregateResult="{Binding}" IsTabStop="False">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:GridViewAggregateResultCell>
</DataTemplate>
</telerik:AggregateResultsList.ItemTemplate>
</telerik:AggregateResultsList>
</Border>
<Border x:Name="IconOuterBorder" BorderBrush="Transparent" BorderThickness="0,0,0,1" Background="Transparent" HorizontalAlignment="Stretch" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<Border x:Name="IconInnerBorder" BorderBrush="White" BorderThickness="1,1,0,1">
<Path x:Name="ExpanderButton" Grid.Column="0" Data="M0,0L1,0 2,0 2,0.99999991 3,0.99999991 3,2 4,2 4,0.99999991 5,0.99999991 5,0 5.9999999,0 7,0 7,0.99999991 5.9999999,0.99999991 5.9999999,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,0.99999991 0,0.99999991z" Fill="Black" HorizontalAlignment="Left" Height="5" Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="7">
<Path.RenderTransform>
<RotateTransform/>
</Path.RenderTransform>
</Path>
</Border>
</Border>
<ToggleButton x:Name="HeaderButton" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" Grid.Column="0" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
<ToggleButton BorderBrush="{x:Null}" BorderThickness="0" Background="Transparent" Grid.Column="1" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Padding="0,0,10,0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="9,0,0,0"/>
</Style>
</ToggleButton.Style>
<ContentPresenter ContentTemplate="{TemplateBinding GroupHeaderTemplate}" Content="{TemplateBinding GroupViewModel}" Grid.Column="1" Margin="0,0,10,0" VerticalAlignment="Center"/>
</ToggleButton>
<Border BorderBrush="Transparent" BorderThickness="0,0,0,0" Grid.ColumnSpan="2" Grid.Column="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
<Border BorderBrush="White" BorderThickness="0,1,1,1"/>
</Border>
</Grid>
</Border>
<Border x:Name="PART_IndicatorPresenter" BorderBrush="Transparent" BorderThickness="0,0,1,1" Grid.Column="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" VerticalAlignment="Stretch" Width="25">
<Border BorderBrush="White" BorderThickness="1" Background="#FFE4E4E4"/>
</Border>
<telerik:IndentPresenter Background="{TemplateBinding Background}" Grid.Column="1" IsTabStop="False" IndentLevel="{TemplateBinding Level}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:IndentPresenter>
<Border x:Name="Content" Grid.ColumnSpan="5" Grid.Column="0" Grid.Row="1" Visibility="Collapsed">
<StackPanel>
<telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
<telerik:GridViewGroupFooterRow x:Name="Footer" IsTabStop="False">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:GridViewGroupFooterRow>
</StackPanel>
</Border>
<Border x:Name="BottomBorder" BorderBrush="Transparent" BorderThickness="0,0,0,1" Grid.Column="2" Grid.Row="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="Collapsed" VerticalAlignment="Bottom"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="GroupHeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{Binding Header}"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#FFE4E4E4"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="10,0,0,0"/>
<Setter Property="MinHeight" Value="25"/>
<Setter Property="AllowDrop" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
Was able to get rid the the vertical lines with :
<Style TargetType="grid:GridViewIndentCell">
<Setter Property="Background" Value="{StaticResource MainBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource BasicBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="grid:GridViewIndentCell">
<Border BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
BorderThickness="{TemplateBinding BorderThickness}" Width="25" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What I'm trying to do is changing color for unselected pivot header. I always used Blend for styling design in WP7 Silverlight apps and now when I'm looking at XAML I don't know what's going on.
I need little help in following PivotStyle:
<Style x:Key="PivotStyle" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<controlsPrimitives:PivotHeadersControl Grid.Row="1" x:Name="HeadersListElement" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}">
<controlsPrimitives:PivotHeadersControl.ItemContainerStyle>
<Style TargetType="controlsPrimitives:PivotHeaderItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controlsPrimitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
Opacity="1"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</controlsPrimitives:PivotHeadersControl.ItemContainerStyle>
</controlsPrimitives:PivotHeadersControl>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You'll need to set a different VisualState for either the Selected or Unselected state.
See http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/2146f5c9-e009-4b72-b4e9-43eec458c7cc
I'm trying to achieve the effect of a pop-up when the user right-clicks in a Silverlight application that shows essentially a custom control. I'm using a Context Menu, and all is working great except that I'm having trouble styling the context menu so that it doesn't highlight itself when the user mouses over.
Here's a snippet of what I'm trying to do:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Height="100" Background="Transparent" HorizontalOffset="-100" VerticalOffset="-100" Margin="98,112,0,0" Name="contextMenu1" VerticalAlignment="Top" Width="200">
<toolkit:ContextMenu.Style>
<Style TargetType="toolkit:ContextMenu">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
<Grid>
<ItemsPresenter Margin="{TemplateBinding Padding}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:ContextMenu.Style>
<Canvas Width="100" Height="100" Background="Transparent">
<Button Width="100" Height="30">Something</Button>
<Button Width="100" Height="30" Canvas.Top="70">Something Else</Button>
</Canvas>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
When the menu is visible I get the effect I want (the two buttons just floating near the mouse), but when I mouse over it the entire box of the context menu highlights itself.
Here's a sample app that demonstrates this:
http://github.com/vermeeca/ContextMenuDemo
How can I disable that effect?
Thanks to a co-worker I've got the solution. I just had to set the ItemContainerStyle on the ContextMenu.
<UserControl.Resources>
<Style x:Key="NoMouseOverStyle" TargetType="toolkit:MenuItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="4,3,2,3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:MenuItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Presenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<!-- VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Bg"/>
<ColorAnimation Duration="0" To="#40FFFFFF" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBorder"/>
</Storyboard>
</VisualState -->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
<Rectangle x:Name="Bg" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#8071CBF1" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#34C5EBFF" Offset="0"/>
<GradientStop Color="#3481D8FF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2" Stroke="Transparent"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="24" Width="Auto"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="17"/>
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Icon}" Margin="1" VerticalAlignment="Center"/>
<ContentPresenter x:Name="Presenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" Margin="{TemplateBinding Padding}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
And then
<toolkit:ContextMenu Height="100" Background="Transparent" HorizontalOffset="-100" VerticalOffset="-100" Margin="98,112,0,0" Name="contextMenu1" VerticalAlignment="Top" Width="200" ItemContainerStyle="{StaticResource NoMouseOverStyle}">