I'm trying to give a style I made in blend to a button that generates in the code. I tried the following but it doesn't seem to work. I also can't find any solutions online.
Here is the code.
private void createBtn()
{
Button btn = new Button();
btn.Name = buttonName;
btn.Style = popUpStyle;
btn.Margin = new Thickness(20);
btn.Content = "Close";
btn.Click += new RoutedEventHandler(btn_Click);
btn.Visibility = System.Windows.Visibility.Visible;
Canvas.Children.Add(btn);
}
And the xaml.
<Style x:Name="popUpStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="popUpStyleCT" TargetType="Button">
<Grid Background="Transparent" Height="150" Width="200">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#FFC2C2C2" Margin="0,15,0,0"/>
<Rectangle Fill="#FF313197" Height="15" Stroke="Black" VerticalAlignment="Top" Opacity="0.25"/>
<Rectangle Fill="#FFE20303" HorizontalAlignment="Right" Height="15" Stroke="Black" VerticalAlignment="Top" Width="30" Opacity="0.25"/>
<TextBlock HorizontalAlignment="Right" Height="15" TextWrapping="Wrap" Text="X" VerticalAlignment="Top" Width="14" FontSize="13.333" Margin="0,0,5,0"/>
<Rectangle Fill="#FF4D4A4A" Height="22" Margin="50,0,44,8" VerticalAlignment="Bottom" Stroke="Black"/>
<Border x:Name="ButtonBackground" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="0,12,0,34">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="-3,2,73,0" Foreground="Black" FontSize="13.333" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Border>
<TextBlock Height="15" TextWrapping="Wrap" Text="Close" VerticalAlignment="Bottom" FontSize="13.333" Margin="85,0,81,12" Foreground="Black"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I think this answer on SL forum is what you've been searching for.
Related
Telerik rad grid header TextWraping is not working but its working for all other rows except header in Silverlight-Ui
image attached .. the TextWraping not working for header row
xaml code
<Style x:Key="ColumnHeaderGripperStyle" TargetType="Thumb">
<Setter Property="Width" Value="8"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ContentControl" x:Key="StretchedContentControl">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
<ControlTemplate x:Key="GridViewHeaderCellTemplate" TargetType="telerik:GridViewHeaderCell">
<Grid x:Name="PART_HeaderCellGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.2000000" To="Normal" />
<VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver" />
<VisualTransition GeneratedDuration="0:0:0.2" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Ascending">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridViewHeaderCell_Selected" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Descending">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="RenderTransform">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridViewHeaderCell_Selected" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="GridViewHeaderCell" Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}"
Background="{TemplateBinding Background}"
BorderThickness="0" Margin="0,0,1,0"/>
</Border>
<Border x:Name="GridViewHeaderCell_Over" Grid.ColumnSpan="2"
BorderBrush="{StaticResource GridView_HeaderOuterBorder_Over}"
BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" >
<Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Over}"
Background="{StaticResource GridView_HeaderBackground_Over}"
BorderThickness="0" />
</Border>
<Border x:Name="GridViewHeaderCell_Selected" Grid.ColumnSpan="2"
BorderBrush="{StaticResource GridView_HeaderOuterBorder_Selected}"
BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" >
<Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Selected}"
Background="{StaticResource GridView_HeaderBackground_Selected}"
BorderThickness="0" />
</Border>
<ContentControl x:Name="ContentPresenter" Grid.Column="0" Foreground="{TemplateBinding Foreground}"
Style="{StaticResource StretchedContentControl}"
Margin="{TemplateBinding Padding}" IsTabStop="{TemplateBinding IsTabStop}"
Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
<Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2"
Fill="{StaticResource GridView_SortIndicatorColor}"
Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="0,3,0,0"
Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z"
Width="5" Height="3"
RenderTransformOrigin=".5,.5"
Opacity="0">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1"
Visibility="{TemplateBinding FilteringUIVisibility}"
Margin="0,0,8,0"/>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}" Grid.ColumnSpan="2" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}" Grid.ColumnSpan="2" />
</Grid>
</ControlTemplate>
<Style TargetType="telerik:GridViewHeaderCell" x:Key="GridViewHeaderCellStyle">
<Setter Property="Template" Value="{StaticResource GridViewHeaderCellTemplate}" />
<Setter Property="Background" Value="{StaticResource GridView_HeaderBackground}" />
<Setter Property="BorderBrush" Value="{StaticResource GridView_HeaderOuterBorder}" />
<Setter Property="BorderThickness" Value="0,0,0,0" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Foreground" Value="{StaticResource GridView_HeaderForeground}" />
<Setter Property="FontSize" Value="11" />
</Style>
<!-- Header Row Style-->
<SolidColorBrush x:Key="GridView_HeaderRowInnerBorder" Color="#FFFCFCFC" />
<LinearGradientBrush x:Key="GridView_HeaderRowBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDCEEFB" Offset="1"/>
<GradientStop Color="#FFDCEEFB"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="GridView_HeaderRowOuterBorder" Color="#FFC0CBD9" />
<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="GridViewHeaderIndentCellDataTemplate">
<telerik:GridViewHeaderIndentCell telerik:StyleManager.Theme="{StaticResource Theme}"/>
</DataTemplate>
<ControlTemplate x:Key="GridViewHeaderRowTemplate" TargetType="telerik:GridViewHeaderRow">
<telerik:SelectiveScrollingGrid>
<telerik:SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</telerik:SelectiveScrollingGrid.ColumnDefinitions>
<Border x:Name="PART_GridViewHeaderRowBorder"
BorderBrush="{TemplateBinding BorderBrush}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
Grid.ColumnSpan="4"
BorderThickness="{TemplateBinding BorderThickness}">
<Border BorderBrush="{StaticResource GridView_HeaderRowInnerBorder}" Background="{TemplateBinding Background}" BorderThickness="0" />
</Border>
<telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter"
telerik:StyleManager.Theme="{StaticResource Theme}"
Grid.Column="3" />
<Border x:Name="PART_IndicatorPresenter"
Width="25"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0,0,1,1"
Visibility="{TemplateBinding RowIndicatorVisibility}"
telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" Background="{StaticResource GridView_HeaderBackground}" BorderThickness="0" />
</Border>
<telerik:IndentPresenter x:Name="PART_IndentPresenter" Grid.Column="1" MinHeight="{TemplateBinding MinHeight}"
telerik:StyleManager.Theme="{StaticResource Theme}"
IndentLevel="{TemplateBinding IndentLevel}"
ItemTemplate="{StaticResource GridViewHeaderIndentCellDataTemplate}"
telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
<Border x:Name="PART_HierarchyIndentPresenter" Grid.Column="2"
Width="25"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0,0,1,1"
Visibility="{Binding HasHierarchy, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"
telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" Background="{StaticResource GridView_HeaderBackground}" BorderThickness="0" />
</Border>
</telerik:SelectiveScrollingGrid>
</ControlTemplate>
<Style TargetType="telerik:GridViewHeaderRow" x:Key="CustomHeaderRowStyle">
<Setter Property="Template" Value="{StaticResource GridViewHeaderRowTemplate}" />
<Setter Property="Background" Value="{StaticResource GridView_HeaderRowBackground}" />
<Setter Property="BorderBrush" Value="{StaticResource GridView_HeaderRowOuterBorder}" />
<Setter Property="BorderThickness" Value="0,0,0,0" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*" />
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<telerik:RadGridView IsFilteringAllowed="False" AutoGenerateColumns="True"
CanUserFreezeColumns="true" CanUserResizeColumns="True"
ShowGroupPanel="False" FrozenColumnCount="{Binding FrozenColumnCount,Source={StaticResource model}}"
ClipboardCopyMode="Cells" ClipboardPasteMode="AllSelectedCells,OverwriteWithEmptyValues,SkipHiddenColumns"
SelectionMode="Extended" SelectionUnit="Mixed"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Visible"
x:Name="RadGridView1" Grid.Column="0" Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding Data, Source={StaticResource model}}"
IsBusy="{Binding IsLoading,Source={StaticResource model}}"
CellEditEnded="RadGridView1_CellEditEnded"
CellValidating="RadGridView1_CellValidating"
PastingCellClipboardContent="RadGridView1_PastingCellClipboardContent"
AutoGeneratingColumn="RadGridView1_AutoGeneratingColumn" CanUserDeleteRows="False"
CanUserInsertRows="False" Pasted="RadGridView1_Pasted" CanUserReorderColumns="False"
CanUserSortColumns="False" BeginningEdit="RadGridView1_BeginningEdit"
CacheMode="BitmapCache" CanUserSortGroups="False" HeaderRowStyle="{StaticResource CustomHeaderRowStyle}"
ElementExporting="RadGridView1_OnElementExporting" Pasting="RadGridView1_Pasting"
DataLoaded="RadGridView1_DataLoaded"
local:ContextMenuBehavior.ContextMenu="{Binding ElementName=GridContextMenu}">
<telerik:RadContextMenu.ContextMenu>
<telerik:RadContextMenu x:Name="GridContextMenu">
<telerik:RadContextMenu.Items>
<telerik:RadMenuItem Header="Lock" />
<telerik:RadMenuItem Header="Unlock" />
</telerik:RadContextMenu.Items>
</telerik:RadContextMenu>
</telerik:RadContextMenu.ContextMenu>
</telerik:RadGridView>
</Grid>
</Border>
</UserControl>
how can i set the header Textwraping??
you have to add text block in headers and give the textblock.Text=col name;textblock.textwrapping=Wrap;
assingn this textblock to header while creating the radGridHeader.
I have a time picker control in xaml as
<TimePicker Time="{Binding SelectedTime, Mode=TwoWay}" HorizontalContentAlignment="Center"
Style="{StaticResource TimePickerStyle}" x:Name="SeekTimePicker" />
and of the control is
<Style x:Key="TimePickerStyle" TargetType="TimePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePicker" >
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}" Background="Red">
<ContentPresenter x:Name="HeaderContentPresenter"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="aaaa" Margin="0,0,0,-3"
Style="{StaticResource HeaderContentPresenterStyle}" />
<Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1"
Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" Content="qqqqqqqqqqqq" Background="Green"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now it look like:
But I want to format it as:
This can do by editing template inside time picker style as below
<Style x:Key="TimePickerStyle" TargetType="TimePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePicker">
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="HeaderContentPresenter"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}" Margin="0,0,0,-3"
Style="{StaticResource HeaderContentPresenterStyle}" />
<Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1"
Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" >
<Button.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding ElementName=FlyoutButton,Path=DataContext.SelectedTimeText}"/>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Some controls in Windows Phone 7 have touchable area around, if you touch not exactly in control, but in this area, the event is still raising from the control (I don't know how to name this area correctly, but can show it in screenshot). I have a custom slider with range selection ability, but it's too hard to touch to the slider thumb and move it. Increasing a thumb is undesireable. How can I add touchable area to slider thumbs to ease positioning of them? Here is a XAML of slider:
<Style TargetType="local:RangeSlider">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:RangeSlider">
<Border Padding="{TemplateBinding Padding}"
>
<Grid>
<Rectangle Fill="#FFCCCCCC" VerticalAlignment="Center" Margin="2.5,0,2.5,0" Height="12" StrokeThickness="0" />
<Border x:Name="SelectedRangeBorder"
Margin="0" Height="12">
<Grid>
<Grid.Resources>
<Style x:Key="EndThumbStyle" TargetType="Thumb">
<Setter Property="Background" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCD0000" Offset="0"/>
<GradientStop Color="#FFCD0000" Offset="0.375"/>
<GradientStop Color="#FFCD0000" Offset="0.375"/>
<GradientStop Color="#FFCD0000" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Background="Black" Width="12" Height="12" Margin="-3,-4,-5,-4">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" Background="#FFCCCCCC" BorderBrush="{TemplateBinding BorderBrush}" Width="12" Height="12">
<Grid Margin="0" Width="12" Height="12" d:IsHidden="True">
<Border x:Name="BackgroundAnimation" Opacity="0" Background="Black"/>
<Rectangle x:Name="BackgroundGradient" StrokeThickness="0" Fill="Black"/>
</Grid>
</Border>
<Rectangle x:Name="DisabledVisualElement" Fill="Black" IsHitTestVisible="false" Opacity="0" Margin="0" StrokeThickness="0" Width="12" Height="12"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FFCCCCCC" StrokeThickness="0" Margin="0" IsHitTestVisible="false" Opacity="0" Width="12" Height="12"/>
<StackPanel Orientation="Horizontal" Margin="0" MaxHeight="10" Width="12" Height="12">
<Rectangle Width="12" Fill="Black" Height="12" StrokeThickness="0" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Rectangle Fill="Black" Width="12" Margin="1,-5,0,0" Height="12" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Thumb x:Name="RangeCenterThumb"
Grid.Column="1"
Cursor="Hand"
Margin="0"
BorderThickness="0" Width="Auto" Height="12" Foreground="#FFCD0000" Background="#FFCD0000"
>
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Background="#FFCD0000" Height="12">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
<Thumb x:Name="RangeStartThumb"
Cursor="SizeWE"
Width="12"
Style="{StaticResource EndThumbStyle}"
BorderThickness="{TemplateBinding BorderThickness}" Height="12" Foreground="Black" Background="Black" BorderBrush="Black"
/>
<Thumb x:Name="RangeEndThumb"
Grid.Column="2"
Cursor="SizeWE"
Width="12"
Style="{StaticResource EndThumbStyle}"
BorderBrush="Black" Height="12" Foreground="Black" BorderThickness="0"
/>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks.
There is nothing 'magic' about the touchable area of the various framework controls. They just have elements that occupy a reasonable amount of screen real-estate and handle touch events they they receive. You can increase your hit-test area by changing the template of your Thumb to increase its size, but only make a small portion of the template visible.
Anyone knows how to easily change the background in ListPicker´s FullMode? Do I need to set a style to be able to do that? I´ve tried that, but can´t find the right place to set the background... If it is a style that needs to be used, where exactly in that style can I set the background? Any help would be highly appreciated :)
Here is the standard Style for the ListPicker:
<Style TargetType="toolkit:ListPicker">
<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBorderBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0 0 0 8"/>
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="2">
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</Border>
<Popup x:Name="FullModePopup">
<Border Background="{StaticResource PhoneChromeBrush}"> <!-- Popup.Child should always be a Border -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl
Grid.Row="0"
Content="{TemplateBinding FullModeHeader}"
Foreground="{StaticResource PhoneForegroundBrush}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
HorizontalAlignment="Left"
Margin="24 12 0 0"/>
<ListBox
x:Name="FullModeSelector"
Grid.Row="1"
ItemTemplate="{TemplateBinding ActualFullModeItemTemplate}"
FontSize="{TemplateBinding FontSize}"
Margin="{StaticResource PhoneMargin}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/> <!-- Ensures all containers will be available during the Loaded event -->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Border>
</Popup>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
There is no way to do this through templating.
The only way to do this is by changing the source of the control. (You'll need to change the Style for TargetType="controls:ListPicker".)
Specifically, you'll ned to change the contents of the FullModePopup.
I was wondering this same thing.
While there is no way of directly changing the background color of the ListPicker, it does follow along with the color of the PhoneChromeBrush resource, and thus you can override the color of all of those in your app to change the color of this background.
For example:
((SolidColorBrush)App.Current.Resources["PhoneChromeBrush"]).Color = Colors.Cyan;
I want to add a header to my ListBoxes and I do this by using a template.
The problem is that if I extend the ListBox's template it seems that the listbox's virtualizingstackpanel doesn't work anymore as expected: it loads all content before I can scroll it.
I found some relevant questions in stackoverflow like this (VirtualizingStackPanel stops working when overriding the default control template for ScrollViewer) but the solution given there cannot be applied to WP7: I can't find the property named "CanContentScroll" of the scrollviewer.
my code
<Style x:Key="ListBoxStyle1" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}">
<StackPanel>
<TextBlock Text="..."/>
<ItemsPresenter/>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To be honest, I'm really not sure what the actual problem is here; the VirtualizingStackPanel is still in the visual tree, but it seems that none of the items actually added. Enough of the bad news, the good news is I've found a way to work round it, by changing the default style of the ScrollViewer to place the header there instead, which results in two styles that look like this:
<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Header" Style="{StaticResource PhoneTextLargeStyle}"/>
<ScrollContentPresenter x:Name="ScrollContentPresenter"
Grid.Row="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<ScrollBar x:Name="VerticalScrollBar"
Grid.RowSpan="2"
IsHitTestVisible="False"
Opacity="0"
Height="Auto"
Width="5"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{TemplateBinding VerticalOffset}"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}" />
<ScrollBar x:Name="HorizontalScrollBar"
Grid.RowSpan="2"
IsHitTestVisible="False"
Opacity="0"
Width="Auto"
Height="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Value="{TemplateBinding HorizontalOffset}"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyle2" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
Style="{StaticResource ScrollViewerStyle1}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>