here I'm once more with another question about Windows Phone.
I just created some custom buttons and use they as background on my buttons. I also created a grayed button to show as disabled button.
But if I disable using the button1.isEnabled = false, the background disappear
Searching on the net I found a way using a Style tag, but I never used before. I tried but, it's aways returns me a problem, can someone give me a example? My Code:
<Button x:Name="btSalvar" Content="Salvar Cor" Margin="68,477,70,0" VerticalAlignment="Top" BorderBrush="{x:Null}" BorderThickness="0" Height="100" Click="btSalvar_Click" ClickMode="Press" IsEnabled="True" Foreground="White">
<Button.Style>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="/Imagens/Buttons/ButtonGray01.png"/>
</Trigger>
</Style.Triggers>
</Button.Style>
</Button>
Is there a way to use Style in Windows Phone 8.1 or another way to set a custom background on button with IsDisabled = false?
Far as I know Style Triggers are a WPF thing not WP8.1/WIN8.1
So you will have to use the Visual State Manager for what you want to do. So go to the UI Designer then go to the Document Outline on the left side of VS2013. Find your button, right click > Edit Template -> Edit a Copy. This will create a custom style for that specific button.
You want to change the Disable State of the button so change that to.....
...
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<!-- here is where we need to change -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(ImageBrush.ImageSource)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="Assets/YOUR_IMAGE.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
....
Now if you set that new style as the style of the button, you will get what you want.
In french interface
Document Outline on the left side of VS2013. Find your button, right click > Edit Template -> Edit a Copy
Menu Format / Modifier le modèle / Modifier une copie.
Cela rajoute dans le xaml le
Related
How Change color of the textbox foreground after select or tap on the textbox in UWP?
i used below code on gotfocus event of textbox.
private void tbWeight_GotFocus(object sender, RoutedEventArgs e)
{
tbWeight.Foreground = new SolidColorBrush(Colors.blue);
}
First time when i write some thing on textbox its work fine
but when textbox lost focus and then tap or get the cursor again on the same textbox the font color is get change to black.
I want change black color to blue or any other color.
is any thing wrong
When you set Foreground property to a TextBox, this color will only be applied when the TextBox lost focus, so when you get cursor of it, this color will not be changed. This is why your code works at the first time.
Then in the LostFocus event you change the foreground to its original color. It makes your foreground changes when got focus and changes again DIRECTLY when lost focus, but the foreground color will only be applied when the TextBox lost focus, it makes your code then seems like never works.
The right way to do this work is to modify the template of TextBox, you can open the Document Outline then find your TextBox, right click it and choose Edit Template, finally select Edit a copy, the default style of your TextBox will then be generated in the Page.Resources. In this style, you can find the VisualState x:Name="Focused", under this visual state, it controls the foreground of TextBox when it got focused, you can change it for example like this:
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> <!--This one here!-->
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RequestedTheme" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
I don't know how to change the Checkbox's Default color.I coded this line for Checkbox
<CheckBox x:Name="chkRememberme" Foreground="Gray" Grid.Row="4" Background="Transparent" IsChecked="False" TabIndex="3" HorizontalAlignment="Center" VerticalAlignment="Top" Background="Blue" Margin="0,2,0,0" />
In the below image, I have mentioned the style of Checkbox I require.
Open designer window, right click on your CheckBox, then choose Edit template -> Edit a copy (or do the same in Blend). This should create default style in your resources (you can find the style also here at MSDN).
In the style you will find everything you want. The background color you are looking for is changed by VisualStateManager - edit suitable visual states and it should work. Sample - changed value of NormalRectangle.Fill property to SystemControlBackgroundBaseLowBrush:
<VisualState x:Name="CheckedNormal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="{ThemeResource CheckBoxCheckedStrokeThickness}" Storyboard.TargetProperty="StrokeThickness" Storyboard.TargetName="NormalRectangle"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
</Storyboard>
</VisualState>
Sample image:
Note also that you may need to edit also other visual states than the one mentioned above - it depends on your need.
I'm working on a UWP app targeted phones and tablets, and am currently implementing a feature for taking a picture with the camera.
I've put a button control on the camera preview, and used an icon to represent the button (see XAML code below).
My problem is, that when i press the button, it turns into a semi transparent grey square, which is far from the green cirle I'm using as icon.
How can I use an other icon for when the button is pressed
<Grid >
<!--Camera preview-->
<CaptureElement Name="PreviewControl" Stretch="Uniform"/>
<Button Tapped="btnCancel_Tapped" Name="btnCancel" Margin="5,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="50" Width="65">
<Button.Background>
<ImageBrush ImageSource="/Assets/images/btn_cancel.png">
</ImageBrush>
</Button.Background>
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,5" Name="btnPhoto" Tapped="btnPhoto_Tapped" IsEnabled="False" Width="70" Height="70">
<Button.Background>
<ImageBrush ImageSource="/Assets/Images/btn_takepicture_off.png">
</ImageBrush>
</Button.Background>
</Button>
</Grid>
To set an image on press you need to edit button template and edit "pressed" state
just add this code in page resources and edit path to image:
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
<Setter Property="Padding" Value="8,4,8,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<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="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ImageBrush ImageSource="SET YOUR IMAGE HERE.jpg"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and apply this style to your button:
Button Style="{StaticResource ButtonStyle1}"
If i were you, I'd make that image inside of the Button's template.
It not only will get rid of unwanted existing elements/looks of the button (such as they grey square), it will also allow you to easily give it behaviors such as what it does when you mouse-over / press it.
To do this in the most simplistic way, paste the following inside your <Button></Button>:
<Button.Template>
<ControlTemplate TargetType="Button">
[[Anything you want your button to be made of goes here]]
</ControlTemplate>
</Button.Template>
In the area I marked "[[Anything you want your button to be made of goes here]]" you can now build exactly what you want your button to look like with anything from <Grid/> to <Image/> to simplistic parts such as <Ellipse/> or <Rectangle/>
I use the following code when changing a button picture once clicked:
Add the following USING STATEMENTS:
using System;
using Windows.UI.Xaml.Media.Imaging;
In the click event, add this code:
PicA.Source= new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/6.png", UriKind.Absolute) };
<--- the PicA represents an image (from the toolbox) and 6.png is my new picture from my assets folder.
If you need to replace your image later back to the original, then just copy/paste the above code and change the picture name (6.png to whatever) back to your original.
Johnny Smith - Shetland Islands UK
Here is another example using the TAPPED event:
private void MyBox_Tapped(object sender, TappedRoutedEventArgs e)
{
var image = sender as Image;
var bitmapImage = image?.Source as BitmapImage;
if (bitmapImage != null)
{
var source = bitmapImage.UriSource.LocalPath;
if (source == "/Assets/Green1 (Custom).png")
{
MyBox.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/Red1 (Custom).png", UriKind.Absolute) };
}
else if (source == "/Assets/Red1 (Custom).png")
{
MyBox.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/Green1 (Custom).png", UriKind.Absolute) };
}
}
<--- The above code allows for inter-changing of two images (unlimited on a multitude of IF statements - endless!). All you need to do is add your coding after each of the 'MyBox' statements to do whatever your programming requires thereafter.
If you combine my earlier reply by using a button click event, then one only requires to add the coding as listed above - meaning a single button click can be used to do many tasks, and also using many different images. The scope is endless as you can use unlimited IF statements throughout your coding within each segment of your coding thereafter. Hope this helps you all... Johnny
You can also use WintRT ToolKit available on NuGet:
https://www.nuget.org/packages/winrtxamltoolkit/
From this Toolkit you can use ImageButton that is a custom Button control that takes one to three images to be used to represent different states of the button: normal, hover, pressed, disabled).
Here is XAML sample of usage:
<toolkit:ImageButton NormalStateImageSource="ms-appx:///Assets/normal_button_state.png"
PressedStateImageSource="ms-appx:///Assets/pressed_button_state.png"/>
Remember to add using xmlns at the top of you page:
xmlns:toolkit ="using:WinRTXamlToolkit.Controls"
How to use the "Snap View" process in Win 8 application?
I have tried many no.of times using different blogs but couldn't find the right solution for it.
Can anyone help me with the following conditions:
What is the coding for snap view?
How to implement this?
I made the application but got stuck in this "Snap View".
Thanks in Advance.
Snap View is a built-in Windows feature.
As long as your user's screen resolution is at least 1366 by 768, they will be able to activate snap view.
SnapView is really easy to implement. Default stuff like back button and Page title is already implemented but you can add your custom elements to the list too.
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource SnappedBackButtonStyle}" />
</ObjectAnimationUsingKeyFrames>
Let's work with above code:
Element you want to change: Storyboard.TargetName="backButton"
Property of the element you want to change: Storyboard.TargetProperty="Style"
New value of the property: Value="{StaticResource SnappedBackButtonStyle}"
So all we are doing is, for backButton change the Style property to {StaticResource SnappedBackButtonStyle}.
You can do same for any other element.
Here is code from the file:
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape" />
<VisualState x:Name="Filled" />
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
so from this free software, I could make myself my own metro button as seen below:
the icon is white though, so may not see it properly, and I put it in my Grid (written in XAML) here:
Still it is technically an image, so I made it into Button, here's a code of transformed image into button:
<Button x:Name="Button_CreateAccount" Content="" HorizontalAlignment="Center" Height="65" Margin="0" Style="{StaticResource Button_CreateAccount}" Width="65" Click="Button_CreateAccount_Clicked"/>
see I name it "Button_CreateAccount", add a Clicked event handler "Button_CreateAccount_Clicked", and using a custom style "{StaticResource Button_CreateAccount}"
it works as I expected, but unlike any other button, it won't blink when pressed and release the blink when released, maybe because it is technically an image. So I reckon I could programmatically make it "blinked" when being pressed by changing its style. Here's the unedited style added automatically by Blend in Visual Studio 2012:
<Style x:Key="Button_CreateAccount" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="PointerOver"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
However, I do not speak XAML language :( I don't have any idea how to simply change the color of the background of the image once being pressed. Any help would be deeply appreciated, thanks!
First, you should make the image have a transparent Background and not a green background. After that do not use your style and change your button to be this
<Button x:Name="Button_CreateAccount" HorizontalAlignment="Center"
Height="65" Margin="0" Width="65" Click="Button_CreateAccount_Clicked"
Background="Green">
<Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
</Button>
From here you will start to see the color changing when you press. If you want to change what the color is then give the button a new style. The best way is to use Visual Studio or Blend and right click the Button (in design view or in the document outline) and select Edit Template -> Edit a copy...
Change the colors within the Pressed VisualState to change the color when the button is pressed.
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Blue"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>