I am using infragistics controls for masked input. I created my own masked input for IP address and inherent class from XamMaskedInput.
The inherited class looks like:
public class IpMaskedTextBox : XamMaskedInput
{
BrushConverter bc = new BrushConverter();
public IpMaskedTextBox() : base()
{
Background = (Brush) bc.ConvertFrom("#F0FAFF");
BorderThickness = new Thickness(0);
BorderBrush = null;
Padding = new Thickness(5,0,5,0);
FontWeight = FontWeights.Bold;
VerticalContentAlignment = VerticalAlignment.Center;
HorizontalContentAlignment = HorizontalAlignment.Center;
}
// Prevent space character
protected override void OnPreviewKeyDown(System.Windows.Input.KeyEventArgs e)
{
base.OnPreviewKeyDown(e);
switch (e.Key)
{
case Key.Right:
e.Handled = true;
break;
case Key.Left:
e.Handled = true;
break;
}
}
}
and the appearance on xaml:
My question is, how can I full fill the prompt char on whole scope from textbox, that does not have free spaces on right and left.
Here the link to infragistics xamMaskedInput API.
Update:
The result should be like this:
Update 2:
Finally i found the style:
<Style x:Key="MaskedInputStyle" TargetType="igEditors:XamMaskedInput">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="igPrim:XamlHelper.SnapsToDevicePixels" Value="True" />
<Setter Property="SpinButtonStyle" Value="{StaticResource spinButtonStyle}" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="2"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource SilverlightDarkBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igEditors:XamMaskedInput">
<igPrim:ValidationDecorator x:Name="MainBorder">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_InputTextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="ReadOnly"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- SSP 10/11/11 TFS91203 - Moved this border to surround the text box below. This is
to fix an issue where if the border thickness is set to a large value, the borders cover the contents. -->
<!--<Border x:Name="BgBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="1" Visibility="Visible" CornerRadius="2" Margin="0"/>
<Border x:Name="OverBorder" BorderThickness="1" CornerRadius="1" Opacity="0" Margin="1" BorderBrush="{StaticResource FocusBorderFillKey}" Grid.ColumnSpan="2"/>-->
<!-- SSP 10/11/11 TFS91203 - Moved this here from above. See comments above. -->
<Border x:Name="BgBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="1" Visibility="Visible" CornerRadius="2" Margin="0">
<!-- SSP 10/11/11 TFS91426 - Changed the VerticalAlignment from Center to Stretch so the
VerticalContentAlignment takes effect.
-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- SSP 10/11/11 TFS91426 - Changed the VerticalAlignment from Center to Stretch so the
VerticalContentAlignment takes effect.
-->
<!-- SSP 7/11/13 TFS128674 - Added IsInputMethodEnabled binding -->
<Grid>
<igEditorsPrim:MaskedInputTextBox
x:Name="PART_InputTextBox"
Style="{StaticResource maskedInputTextBoxStyle}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
TextAlignment="{Binding HorizontalContentAlignment, Converter={StaticResource horizToTextAlignmentConverter}, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{TemplateBinding Foreground}"
InputMethod.IsInputMethodEnabled="{TemplateBinding InputMethod.IsInputMethodEnabled}"
InputMethod.PreferredImeState="{TemplateBinding InputMethod.PreferredImeState}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Stretch"
igPrim:XamlHelper.Focusable="{TemplateBinding igPrim:XamlHelper.Focusable}"
IsTabStop="{TemplateBinding IsTabStop}"
/>
<Border x:Name="OverBorder" BorderThickness="1" CornerRadius="1" Opacity="0" BorderBrush="{StaticResource FocusBorderFillKey}" Grid.ColumnSpan="2"/>
</Grid>
<Grid x:Name="PART_SpinButtons" Grid.Column="1" Visibility="{TemplateBinding SpinButtonVisibilityResolved}" Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RepeatButton x:Name="spinUp" Style="{TemplateBinding SpinButtonStyle}" ContentTemplate="{StaticResource IncreaseGlyphKey}" >
<ig:Commanding.Command>
<igEditorsPrim:MaskedInputCommandSource EventName="Click" CommandId="SpinUp" />
</ig:Commanding.Command>
</RepeatButton>
<RepeatButton x:Name="spinDown" Style="{TemplateBinding SpinButtonStyle}" Grid.Row="2" ContentTemplate="{StaticResource DecreaseGlyphKey}">
<ig:Commanding.Command>
<igEditorsPrim:MaskedInputCommandSource EventName="Click" CommandId="SpinDown" />
</ig:Commanding.Command>
</RepeatButton>
</Grid>
</Grid>
</Border>
</Grid>
</igPrim:ValidationDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
for testing purposes I have a Hub control in UWP that looks like this:
<Hub x:Name="hubTest1">
<HubSection Margin="10,0,0,0" Width="200" Background="CadetBlue" ScrollViewer.VerticalScrollMode="Enabled" HorizontalContentAlignment="Stretch" Header="#" VerticalAlignment="Stretch">
<HubSection.HeaderTemplate>
<DataTemplate>
<TextBlock Foreground="White">This is some Test</TextBlock>
</DataTemplate>
</HubSection.HeaderTemplate>
<DataTemplate>
<ScrollViewer HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="0,0,0,0">
<RichTextBlock Height="1000" Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Stretch">
<Paragraph>
This is a test.
<LineBreak></LineBreak>
This is a test.
<LineBreak></LineBreak>
This is a test.
<LineBreak></LineBreak>
... Repeated many times ...
</Paragraph>
</RichTextBlock>
</ScrollViewer>
</DataTemplate>
</HubSection>
<HubSection Margin="10,0,0,0" Background="BlueViolet" Width="300" Foreground="White" HorizontalContentAlignment="Stretch" Header="#">
<HubSection.HeaderTemplate>
<DataTemplate>
<TextBlock Foreground="White">This is some Test</TextBlock>
</DataTemplate>
</HubSection.HeaderTemplate>
<DataTemplate>
<TextBlock>This is a test 2</TextBlock>
</DataTemplate>
</HubSection>
</Hub>
Where I'm having trouble is I want the first HubSection to be scrollable off the page vertically when filled with more content than the screen. It only goes to the edge though. The inside ScrollViewer does scroll the text down vertically, but it's inside the inner container of the DataTemplate and isn't giving the necessary result. Also the Hub is inside a SplitView.Content container, I'm not sure if that affects the behavior of the Hub or not. I'm wondering if it's possible to get the desired behavior? Any help you guys can give is greatly appreciated.
The inside ScrollViewer doesn't go all the way down because you gave the RichTextBlock a fixed Height of 1000px. Remove it and the problem should go away.
Also it's OK to put the Hub inside a SplitView and have vertically scrolling content too.
Update
If you want the whole HubSection including the header to be scrollable, two things you need to do:
Remove the ScrollViewer inside your DataTemplate.
Create a new Style for your HubSection and inside its
ControlTemplate, insert a new ScrollViewer as its top level
container. Something like this -
<Style x:Key="HubSectionStyle1"
TargetType="HubSection">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="VerticalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Left" />
<Setter Property="VerticalContentAlignment"
Value="Top" />
<Setter Property="Padding"
Value="12,10,12,0" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HubSection">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Border.Resources>
<ControlTemplate x:Key="HeaderButtonTemplate"
TargetType="Button">
<Grid x:Name="ButtonRoot"
Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource HubSectionHeaderButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource HubSectionHeaderButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="ButtonRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource HubSectionHeaderButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ImitatedTextBlock">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource HubSectionHeaderForeground}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
OpticalMarginAlignment="TrimSideBearings"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Border.Resources>
<Grid HorizontalAlignment="Stretch"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle x:Name="HubHeaderPlaceholder"
Grid.Row="0" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button x:Name="HeaderButton"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Column="0"
Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}"
FontSize="{ThemeResource HubSectionHeaderThemeFontSize}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="False"
IsTabStop="False"
Margin="{ThemeResource HubSectionHeaderThemeMargin}"
Grid.Row="1"
Template="{StaticResource HeaderButtonTemplate}"
UseSystemFocusVisuals="True"
VerticalAlignment="Bottom" />
<Button x:Name="SeeMoreButton"
Grid.Column="1"
Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}"
FontSize="{ThemeResource HubSectionHeaderSeeMoreThemeFontSize}"
HorizontalAlignment="Right"
Margin="{ThemeResource HubSectionHeaderSeeMoreThemeMargin}"
Grid.Row="1"
Template="{StaticResource HeaderButtonTemplate}"
UseSystemFocusVisuals="True"
Visibility="Collapsed"
VerticalAlignment="Bottom" />
</Grid>
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Grid.Row="2"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Border>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm upgrading my app to UWP and found that when I swipe the pivot item it works fine while clicking|tapping will cause app crash. This only happens in SP not in desktop mode nor phone. I do think this style is broken, but have no idea why it will fail and how to fix it. Any idea?
<Style x:Key="PivotStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource XX.ColorBrush.BB1}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="-2,0,0,0">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a group box that has custom styling on it and I'm trying to create Visual states for it and move to those visual states when a button is hit on my program.
The code below stylizes the groupbox to and changes the header to solid blue
Also be warned still learning code so this code may be messy or poorly done.
<Style TargetType="GroupBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupBox">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0"
BorderThickness="1"
BorderBrush="#3c4a55"
Background="#FF0080D4">
<Label Foreground="White">
<ContentPresenter Margin="0"
ContentSource="Header"
RecognizesAccessKey="True" />
</Label>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState Name="Normal"/>
<VisualState x:Name="Orange">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="BackgroundColor"
Storyboard.TargetProperty="Color"
To="{StaticResource CVinYellow}"
/>
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition To="Orange" GeneratedDuration="00:00:01"/>
<VisualTransition To="Normal" GeneratedDuration="00:00:01"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
<Border Grid.Row="1"
BorderThickness="1,1,1,1"
BorderBrush="#25A0DA">
<ContentPresenter Margin="1" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code behind is as follows:
private void radioButton_Checked(object sender, RoutedEventArgs e)
{
VisualStateManager.GoToState(testGroupBox, "Orange", true);
}
When this is ran and the button is clicked the style does not change at all and it produces no errors.
I'm not entirely sure what I am doing wrong at this point, Can you override colors of a custom control with a visual state?
Figured it out with the help of thumbmunkeys.
The VisualStateManager must be the top element. Had to move it so it was below the grid.
<Style TargetType="GroupBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupBox">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState Name="Normal"/>
<VisualState x:Name="Orange">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="BorderColors"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="{StaticResource CVinYellow}"
/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border x:Name="BorderColors"
Grid.Row="0"
BorderThickness="1"
BorderBrush="#3c4a55"
Background="#FF0080D4">
<Label Foreground="White">
<ContentPresenter Margin="0"
ContentSource="Header"
RecognizesAccessKey="True" />
</Label>
</Border>
<Border Grid.Row="1"
BorderThickness="1,1,1,1"
BorderBrush="#25A0DA">
<ContentPresenter Margin="1" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm creating an app where on my main page I have a list with a ToggleSwitch control on each row but the control doesn't appear on the phone emulator. The XAML for the ToggleSwitch control is as below:
<toolkit:ToggleSwitch x:Name="ToggleSwitch" IsChecked="false" Content="Content Goes here" Checked="switch_Unchecked" Unchecked="switch_Unchecked" BorderBrush="black" Background="Black" Width="200"/>
When I click on that code, it shows me that:
So I believe that the control with BorderBrush=black and Background=Black is at the right place but it doesn't appear...
May somebody helps me with that ?
What's the color of your Grid Background color? There might be some problem with that too. Try applying the following style for the Toggle Switch.
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:ToggleSwitch Margin="12,0" Content="Live Update" Background="White" Foreground="Black" Style="{StaticResource FixedToggleSwitchStyle}"/>
</Grid>
And the style is,
<Style x:Key="FixedToggleSwitchButtonStyle" TargetType="toolkitPrimitives:ToggleSwitchButton">
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkitPrimitives:ToggleSwitchButton">
<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CacheMode="BitmapCache" Opacity="{TemplateBinding Opacity}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0" To="{TemplateBinding Foreground}" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Storyboard.TargetName="SwitchBottom"/>
<ColorAnimation Duration="0" To="{TemplateBinding Foreground}" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ThumbCenter"/>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.05" To="Unchecked"/>
<VisualTransition GeneratedDuration="0:0:0.05" To="Checked"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="69" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="BackgroundTranslation">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="15"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0" To="69" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="ThumbTranslation">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="15"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Dragging"/>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="BackgroundTranslation"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="ThumbTranslation"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="SwitchRoot" Background="Transparent" Height="95" Width="136">
<Grid x:Name="SwitchTrack" Width="89">
<Grid x:Name="SwitchBottom" Background="{TemplateBinding SwitchForeground}" Height="34">
<Rectangle x:Name="SwitchBackground" Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Height="20" VerticalAlignment="Center" Width="77">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="BackgroundTranslation"/>
</Rectangle.RenderTransform>
</Rectangle>
<Border BorderBrush="{TemplateBinding Foreground}" BorderThickness="3">
<Border BorderBrush="{TemplateBinding Background}" BorderThickness="4"/>
</Border>
</Grid>
<Border x:Name="SwitchThumb" BorderBrush="{TemplateBinding Background}" BorderThickness="4,0" HorizontalAlignment="Left" Height="38" Margin="-4,0" Width="28">
<Border.RenderTransform>
<TranslateTransform x:Name="ThumbTranslation"/>
</Border.RenderTransform>
<Border x:Name="ThumbCenter" BorderBrush="{TemplateBinding Foreground}" BorderThickness="2" Background="{TemplateBinding Foreground}"/>
</Border>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="FixedToggleSwitchStyle" TargetType="toolkit:ToggleSwitch">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ToggleSwitch">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CacheMode="BitmapCache" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="12,5,12,42">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource PhoneSubtleBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" HorizontalAlignment="Left" IsTabStop="False" Margin="-1,0,0,0" Opacity="{TemplateBinding Opacity}" VerticalAlignment="Bottom"/>
<ContentControl x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="-1,1,0,-7" Opacity="{TemplateBinding Opacity}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<toolkitPrimitives:ToggleSwitchButton x:Name="Switch" Background="{TemplateBinding Background}" Grid.Column="1" Margin="-22,-29,-24,-28" Opacity="{TemplateBinding Opacity}" Grid.RowSpan="2" SwitchForeground="{TemplateBinding SwitchForeground}" VerticalAlignment="Bottom" Style="{StaticResource FixedToggleSwitchButtonStyle}" Foreground="{TemplateBinding Foreground}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Change your Background color and Foreground color as per your needs in Toggle Switch.
Have either one of these property, Background or the BorderBrush.
Why don't you try it this way?
xaml:
<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch"
OnContent="On" OffContent="Off"
Toggled="ToggleSwitch_Toggled"/>
private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
// Add code to perform some action here.
}
Have a look at this too. Is that the one you're using from the Toolkit or what?
Hope it helps!
I have list box with style added to it.
Here is my code:
<!-- Style for list item selector -->
<Style x:Key="ListItemSelectorStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property ="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="ListBoxItem" Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ListItemBorder" BorderBrush="Transparent" Background="#e3e8f0">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock
Name="textBlock"
Text="{Binding Path=answerText}"
HorizontalAlignment="Stretch"
Padding="10,25,10,25"
MinHeight="80"
VerticalAlignment="Center"
TextAlignment="Center"
Style="{StaticResource TextStyle}"
Foreground="Black"/>
<Image Name="ImageBlock"
Grid.Row="0"
Width="Auto"
Height="Auto"
Stretch="UniformToFill"
Source="{Binding answerImage}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="1,1,1,1"/>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My List box :
<ListBox Name="listBox"
HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource ListItemSelectorStyle}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
SelectionChanged="ListBoxClicked"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Here i have added two colors one for default item color "#e3e8f0" and one is Selected item and MouseOver color "#c9ebf2" in my style
Now I have a button and its click event in my .CS file Now when i click on that the Selected item and MouseOver color "#c9ebf2" should be changed to Green color,
How to acheive this ?
You have given #c9ebf2 color for both mouseover and selected state in your style. Change your color for selected state.