While using the slider for windows phone 7 app i am facing an issue to make the slider in the center position. what i am trying is to get a balance slider where one can slide to left or right position and center will be default.
<Style x:Key="SliderStyle1" TargetType="Slider">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Maximum" Value="10"/>
<Setter Property="Minimum" Value="0"/>
<Setter Property="Value" Value="0"/>
<Setter Property="Background" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalFill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HorizontalTemplate" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="HorizontalTrack" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2" Grid.Column="2" RadiusY="6" RadiusX="6" StrokeThickness="2" />
<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" RadiusX="6" RadiusY="6" RenderTransformOrigin="0,0"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="1" IsTabStop="True" Template="{StaticResource PhoneSimpleRepeatButton}" HorizontalAlignment="Right"/>
<Thumb x:Name="HorizontalThumb" Grid.Column="1" Margin="-1,0,0,30" RenderTransformOrigin="0.5,0.5" Template="{StaticResource PhoneSimpleThumb}" Width="1" BorderThickness="3" Background="Black" BorderBrush="#26000000" >
<Thumb.Foreground>
<SolidColorBrush Color="#FF1BA1E2"/>
</Thumb.Foreground>
<Thumb.RenderTransform>
<ScaleTransform ScaleY="1" ScaleX="32"/>
</Thumb.RenderTransform>
</Thumb>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to give it a minimum and maximum values to it considering minimum values to negative rather then it being zero.
**
How can i get a balance slider where one can slide to left or right position and center will be default providing them the horizontal fill on both the sides?
**
a control template don't seems to be the solution.
try just setting Maximum="1" Minimum="-1" Value="0" when using a slider for this case
Related
I have a problem in setting the TextBlock color in my button content,this is my code:
<Style x:Key="ButtonStyle"
TargetType="Button">
<Setter Property="Background" Value="#e6e6e6" />
<Setter Property="BorderBrush" Value="#393185" />
<Setter Property="Foreground" Value="#00a0e3"/>
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="#00a0e3" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="#393185"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
Margin="{TemplateBinding Margin}"
VerticalAlignment="Center"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
the problem is that the textblock does not change the Foreground color when I press the button
have you please any idea how can I correct my code
thanks for help
Update:
this is my xaml code and the Textblock that I want to change the text color from Gray to #00a0e3 when I press the button:
<Button Style="{Binding Source={StaticResource ButtonStyle}}">
<Grid Margin="0" x:Name="Grid2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Click="MenuButton2_Click">
<Image Source="images/3.png" Height="25" Width="25" x:Name="img2" Margin="0"/>
</Button>
<TextBlock Text="Restaurant" Foreground="Gray" x:Name="res3" Grid.Column="1"/>
</Grid>
</Button>
In Response to the Update,
see you want completely different thing. The TextBlock whose foreground you need to change, is outside the ContentPresenter of Button control. Hence, through its style you cannot modify the Foreground. You need to add Tap event to the button and from backend code, you can change the foreground color. See the below code.
In XAML --
<Button Grid.Column="0" Tapped="MenuButton2_Tapped">
<Image Source="images/3.png" Height="25" Width="25" x:Name="img2" Margin="0"/>
</Button>
<TextBlock x:Name=restaurantTextBlock Text="Restaurant" Foreground="Gray" x:Name="res3" Grid.Column="1"/>
In C#---
restaurantTextBlock.Foreground = new SolidColorBrush(Color.FromArgb(255,0,160,227));//mention any color
As Romasz pointed out, you have set the Foreground color of button same as the foreground color of button when in pressed state i.e #00a0e3 . I think while copying the color hexadecimal code, you may have pasted wrong. Change the color in either Pressed state or initial Foreground test. Your code works though once either of the change is made.
As always, if you find this answer helpful and correct, please vote this answer as correct answer. You are welcome to ask anymore questions if you like.
I have a button with background image and white text.
When i click it or put the mouse over (focus) show a black border and the text stay black.
What can i do to ignore the mouse over and assume the click visual effect when pressed?
Already add this but no effect.
<Style x:Key="ButtonActionStyle" TargetType="Button">
...
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="UseSystemFocusVisuals" Value="False"/>
</Style>
Thank you
This code do what i need, but no click visual effect :x
<Style x:Key="ButtonActionStyle" TargetType="Button">
...
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="UseSystemFocusVisuals" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="grid">
<DiscreteObjectKeyFrame KeyTime="1">
<DiscreteObjectKeyFrame.Value>
<x:Int32>1</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid x:Name="grid" Margin="0" Grid.Row="0" Grid.RowSpan="1">
<Border
BorderBrush="{TemplateBinding Background}"
BorderThickness="0"
CornerRadius="0"
Background="{TemplateBinding Background}"/>
<ContentPresenter>
<TextBlock
FontFamily="{TemplateBinding FontFamily}"
SelectionHighlightColor="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="Auto"
Width="Auto"
Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ContentPresenter>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Based on this tutorial, it's done.
<Style x:Key="ButtonActionStyle" TargetType="Button">
...
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="UseSystemFocusVisuals" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="grid.(Grid.Row)" Value="0"/>
<Setter Target="grid.(Canvas.ZIndex)" Value="0"/>
<Setter Target="grid.(UIElement.RenderTransformOrigin)">
<Setter.Value>
<Foundation:Point>0.5,0.5</Foundation:Point>
</Setter.Value>
</Setter>
<Setter Target="grid.(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Value="1"/>
<Setter Target="grid.(UIElement.Projection).(PlaneProjection.LocalOffsetX)" Value="5"/>
<Setter Target="grid.(UIElement.Projection).(PlaneProjection.LocalOffsetY)" Value="5"/>
<Setter Target="grid.(UIElement.Projection).(PlaneProjection.LocalOffsetZ)" Value="0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid x:Name="grid" Margin="0" Grid.Row="0" Grid.RowSpan="1">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Border
BorderBrush="{TemplateBinding Background}"
BorderThickness="0"
CornerRadius="0"
Background="{TemplateBinding Background}"/>
<ContentPresenter>
<TextBlock
FontFamily="{TemplateBinding FontFamily}"
SelectionHighlightColor="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="Auto"
Width="Auto"
Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ContentPresenter>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a Windows 8.1 application with a Settings Flyout.
I am trying to extend the SettingsFlyout so as to modify the top header part of it to consist of a TextBox instead of the title as shown below
As you can see in the above UI, there is no Title.
But looks like the Title property is taken by default in SettingsFlyout.
How do I override this?
I would be very glad if someone can point me in the right direction.
Thanks in Advance.
You could change the style/template of the flyout, but you shouldn't do that. In case you really need to - this is the default one I extracted with Blend.
<Style x:Key="SettingsFlyoutStyle1" TargetType="SettingsFlyout">
<Setter Property="RequestedTheme" Value="Light"/>
<Setter Property="HeaderBackground" Value="{ThemeResource SettingsFlyoutHeaderBackgroundThemeBrush}"/>
<Setter Property="HeaderForeground" Value="{ThemeResource SettingsFlyoutHeaderForegroundThemeBrush}"/>
<Setter Property="Background" Value="{ThemeResource SettingsFlyoutBackgroundThemeBrush}"/>
<Setter Property="BorderThickness" Value="1,0,0,0"/>
<Setter Property="Padding" Value="39,33,40,33"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="Width" Value="346"/>
<Setter Property="MinWidth" Value="320"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SettingsFlyout">
<Border BorderBrush="{Binding TemplateSettings.BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}" BorderThickness="{Binding TemplateSettings.BorderThickness, RelativeSource={RelativeSource Mode=TemplatedParent}}" Background="{TemplateBinding Background}">
<Border.Resources>
<Style x:Key="BackButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}"/>
<Setter Property="FontSize" Value="39"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SettingsFlyoutBackButtonPointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PressedBackground"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PressedGlyph"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SettingsEdgeLocationStates">
<VisualState x:Name="Right"/>
<VisualState x:Name="Left">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="NormalGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value=""/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="PressedGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value=""/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent" Margin="-12,-16,-10,-10">
<Ellipse x:Name="Background" Fill="Transparent" HorizontalAlignment="Left" Height="30" Margin="12,0,0,0" Stroke="{TemplateBinding Foreground}" StrokeThickness="2" Width="30"/>
<TextBlock x:Name="NormalGlyph" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Foreground}" FontWeight="SemiLight" Margin="10,0,0,0" Text=""/>
<Ellipse x:Name="PressedBackground" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="30" Margin="12,0,0,0" Opacity="0" StrokeThickness="0" Width="30"/>
<TextBlock x:Name="PressedGlyph" AutomationProperties.AccessibilityView="Raw" Foreground="{TemplateBinding Background}" FontWeight="SemiLight" Margin="10,0,0,0" Opacity="0" Text=""/>
</Grid>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Margin="-3,-6,-3,0" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Margin="-3,-6,-3,0" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Border.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="Header" Background="{Binding TemplateSettings.HeaderBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="BackButton" Background="{Binding TemplateSettings.HeaderBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="{Binding TemplateSettings.HeaderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}}" Height="30" Margin="39,0,0,12" Style="{StaticResource BackButtonStyle}" VerticalAlignment="Bottom" Width="30"/>
<TextBlock Grid.Column="1" Foreground="{Binding TemplateSettings.HeaderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}}" FontWeight="SemiLight" FontSize="{ThemeResource SettingsFlyoutHeaderThemeFontSize}" FontFamily="{ThemeResource SettingsFlyoutHeaderThemeFontFamily}" Margin="10,0,0,13" Text="{TemplateBinding Title}" TextTrimming="CharacterEllipsis" VerticalAlignment="Bottom"/>
<Image Grid.Column="2" Height="30" Margin="0,0,40,15" Source="{Binding TemplateSettings.IconSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" VerticalAlignment="Bottom" Width="30"/>
</Grid>
<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{Binding TemplateSettings.ContentTransitions, RelativeSource={RelativeSource Mode=TemplatedParent}}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ScrollViewer>
<Rectangle x:Name="InputPanePlaceholder" Grid.Row="2"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
First, I have listbox display text and icon with template like this:
<DataTemplate x:Key="TreeItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="0,0,1,0" Visibility="{Binding NormalTextVisible}" TextWrapping="Wrap" Text="{Binding Name, Mode=TwoWay}" d:LayoutOverrides="Width, Height" Foreground="{Binding Colour}" Padding="{Binding ActualIndent, Mode=TwoWay}" FontSize="{StaticResource PhoneFontSizeMedium}"/>
<Grid Grid.Column="1">
<Button Style="{StaticResource IconButton}" Height="42" Width="42">
<ImageBrush ImageSource="{Binding Image}" Stretch="None"/>
</Button>
</Grid>
</Grid>
</DataTemplate>
Here is my IconButton style:
<Style x:Key="IconButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneBackgroundBrush}"/>
<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="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BackgroundBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="BackgroundBrush" BorderThickness="0" Background="{StaticResource PhoneBackgroundBrush}" CornerRadius="24" Margin="{StaticResource PhoneTouchTargetOverhang}">
<Grid x:Name="ContentArea" OpacityMask="{TemplateBinding Content}" Background="{TemplateBinding Foreground}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The first time I go to this view, everything is ok. But when I go to another view,and then then press back key to get back to this view, the icon flashes for 1 to 2 seconds (but text and another controls are ok).
I tried it with many ways but doesn't work (double animation for opacity, change background like phone theme)
Is there any other way out?
I am new at WPF and XAML, but still as I was reading about this is tricky thing. The thing what I want to change on mouseover is the Label foreground color, but the label is inside of the button content. Everything should be done by styles, without C#.
<Button Name="Home_Button" Height="50" VerticalAlignment="Top" Click="Home_Click" Background="Gray" Foreground="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0">
<DockPanel>
<Image Source="Images/icons/home.png" HorizontalAlignment="Left" Margin="-90,0,0,0" />
<Label VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,-90,0" Foreground="LightGray" FontSize="12">Home</Label>
</DockPanel>
</Button>
My style settings looks like this:
<Style TargetType="{x:Type Button}" x:Key="MetroButton">
<Setter Property="MinHeight" Value="25" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="10" />
<Setter Property="FontFamily" Value="{DynamicResource DefaultFont}" />
<Setter Property="Background" Value="{DynamicResource GrayBrush7}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextBoxBorderBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
<Setter Property="Padding" Value="5,6" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PressedBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value="0.7" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0.3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ActiveContent">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ActiveContent">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" />
<Rectangle x:Name="DisabledVisualElement"
Fill="{DynamicResource ControlsDisabledBrush}"
IsHitTestVisible="false"
Opacity="0"
RadiusY="3"
RadiusX="3" />
<Border x:Name="MouseOverBorder"
Background="{DynamicResource GrayBrush8}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0" />
<Border x:Name="ActiveContent"
Background="LightGray"
Opacity="0"
/>
<Border x:Name="PressedBorder"
Background="{DynamicResource GrayBrush5}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0" />
<Rectangle x:Name="FocusRectangle"
Stroke="{DynamicResource TextBoxMouseOverInnerBorderBrush}"
RadiusY="4"
RadiusX="4"
Margin="-1"
Opacity="0" />
<Rectangle x:Name="FocusInnerRectangle"
StrokeThickness="{TemplateBinding BorderThickness}"
Stroke="{DynamicResource TextBoxMouseOverBorderBrush}"
RadiusX="3"
RadiusY="3"
Opacity="0" />
<ContentPresenter x:Name="contentPresenter"
RecognizesAccessKey="True"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content, Converter={StaticResource ToUpperConverter}}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I wanna change the Foreground.Color on MouseOver on the Label which is inside of the Button. Right now the style settings only change the Background of the Button on MouseOver.
Put a sub style for Label inside the Style.Resources of your button style, this is a cut down example but should explain what I'm trying to say.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Button">
<Style.Resources>
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Gray">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
</Grid.RowDefinitions>
<!-- This represents your image/-->
<Grid Grid.Row="0" Background="{TemplateBinding Background}"/>
<Label FontSize="20" Grid.Row="1" Content="{TemplateBinding Content}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Margin="172,122,131,79" Foreground="Green">
test
</Button>
</Grid>
</Window>
The Label style won't apply to anything outside of the Button, if you mouse over any part of the button area it'll turn the top half blue but will only turn the text green if the mouse is over the bottom half (which is covered by the label)
try this.
<Button Height="36" Margin="286,274,0,0" Width="74" MouseEnter="Button_MouseEnter_1">
<Label x:Name="mylbl" Content="Test" MouseEnter="mylbl_MouseEnter"/>
</Button>
code behind:
private void mylbl_MouseEnter(object sender, MouseEventArgs e)
{
mylbl.Background = new SolidColorBrush(Colors.Red);
}