I have this in my App.xaml
<Style x:Key="ColorBlack" TargetType="StackPanel">
<Setter Property="TextElement.Foreground" Value="Black"></Setter>
</Style>
And this on a xaml page
<StackPanel Style="{StaticResource ColorBlack}"></StackPanel>
In the designer the color changes to black but when i run the application on a device it crashes and says it doesn't know the name ColorBlack.
You can try something like this :
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type FrameworkElement}">
<Setter Property="TextBlock.Foreground" Value="Blue" />
</Style>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}" />
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}" />
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type TextBox}}" />
</StackPanel.Resources>
<TextBlock Text="TextBlock"/>
<Label Content="Label"/>
<Button Content="Button"/>
<TextBox Text="TextBox"/>
</StackPanel>
Related
I have defined a Style as a UserControl's resource.
...
<UserControl.Resources>
<Style x:Key="BottomBarButton" TargetType="Button">
<Setter Target="Background" Value="Transparent"/>
<Setter Target="BorderThickness" Value="1"/>
<Setter Target="HorizontalAlignment" Value="Stretch"/>
<Setter Target="VerticalAlignment" Value="Stretch"/>
</Style>
</UserControl.Resources>
...
and it's used
...
<Button Grid.Column="0" Style="{StaticResource BottomBarButton}">
...
</Button>
<Button Grid.Column="1" Style="{StaticResource BottomBarButton}">
...
</Button>
...
This work on UWP, but the style does not apply on Android or Wasm. These are the only tested platforms
Must use Property instead of Target.
<Style x:Key="BottomBarButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
You've defined the style named "ButtonStyle" but are referencing a style named "BottomBarButton" (which I'm guessing is defined elsewhere).
Tried this?
<Button Grid.Column="0" Style="{StaticResource ButtonStyle}">
...
</Button>
<Button Grid.Column="1" Style="{StaticResource ButtonStyle}">
...
</Button>
I am trying to get the MenuFlyout to align bottom-left of the button. I can achieve this if i put the button at the left of the screen, but if the button is anywhere else the MenuFlyout is always centered right under the button. I suspect that I have to create a template and change a property in there but I do not know what I need to change to achieve this.
I've pasted my xaml below with a note of where i suspect I need to make the change. I am new to xaml, any help or guidance will be much appreciated. Thanks!
<Page
x:Class="ButtonMenuFlyout.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ButtonMenuFlyout"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="BasicTextStyle" TargetType="MenuFlyoutItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="13" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="MinHeight" Value="36" />
</Style>
<Style x:Key="MenuFlyoutPresenterStyle1" TargetType="MenuFlyoutPresenter">
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Padding" Value="20,0,20,16" />
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<Grid Background="{TemplateBinding Background}">
<!--[change property in here]-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="buttonMenuFlyout"
Content="..."
VerticalAlignment="Top"
HorizontalAlignment="right"
Padding="16,4"
Margin="120,10,0,5"
Background="White">
<Button.Flyout>
<MenuFlyout Opened="MenuFlyout_Opened" MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle1}">
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Settings" Click="MenuFlyoutItem_Click" />
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Feedback" Click="MenuFlyoutItem_Click_1"/>
<MenuFlyoutItem Style="{StaticResource BasicTextStyle}" Text="Notebook" Click="MenuFlyoutItem_Click_2" />
</MenuFlyout>
</Button.Flyout>
</Button>
</Grid>
</Page>
In your MenuFlyout_Opened method, you can explicitly call ShowAt(UIElement, Point) method.
This first parameter will probably be your buttonMenuFlyout; the second one, your offset which might roughly be new Point(0, buttonMenuFlyout.ActualHeight).
I'd like to have several TextBlocks generally looking the same, but each needs to react on another trigger and in another way. I've tried to use a common style (MyTextBlockStyle) and add triggers later. But I get allways error meesages like "the property 'style' has been declared twice" or simillar.
To explain what I mean, I've made an example with 3 TextBlocks. 2 of them are bound to each a different CheckBox, and each triggering a different property (displayed text vs. foreground color). A third TextBlock shall change its background color depending of the content of a TextbBox. How can I achieve something like this?
<UserControl.Resources>
<Style x:Key="MyTextBlockStyle" TargetType="TextBlock">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Padding" Value="5"/>
</Style>
</UserControl.Resources>
<Grid >
<StackPanel Margin="10">
<CheckBox x:Name="CheckBox01" Content="Change Background of TextBlock 1" IsChecked="False" Foreground="White" Margin="5" />
<CheckBox x:Name="CheckBox02" Content="Change Background of TextBlock 2" IsChecked="False" Foreground="White" Margin="5" />
<TextBox x:Name="TextBox03" Padding="10" Background="White" Text="Enter Text here ..." Tooltip="Change Background of TextBlock 3"/>
<TextBlock Style="{StaticResource MyTextBlockStyle}" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="No" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox01, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="Yes!" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Style="{Static Resource MyTextBlockStyle}" Text="Something different">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Red" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox02, Path=IsChecked}" Value="True">
<Setter Property="Foreground" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Style="{Static Resource MyTextBlockStyle}" Text="Anything else">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="Yellow" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=TextBox03, Path=Text}" Value="">
<Setter Property="Background" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Grid >
Please try this code.It works.I guess as you wish
<Window.Resources>
<Style TargetType="TextBlock">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=CheckBox01,Path=IsChecked}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb1"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Orange"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=CheckBox02,Path=IsChecked}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb2"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Pink"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=TextBox03,Path=Text}" Value=""/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb3"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Green"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<StackPanel Margin="10">
<CheckBox x:Name="CheckBox01" Content="Change Background of TextBlock 1" IsChecked="False" Margin="5"/>
<CheckBox x:Name="CheckBox02" Content="Change Background of TextBlock 2" IsChecked="False" Margin="5"/>
<TextBox x:Name="TextBox03" Padding="10" Background="White" Text="Enter Text here ..."/>
<TextBlock Tag="tb1"/>
<TextBlock Tag="tb2" Text="Something different"/>
<TextBlock Tag="tb3" x:Name="tb3" Text="Anything else"/>
</StackPanel>
</Grid >
You are looking for the BasedOn Property. It gets me all the time.
<TextBlock>
<TextBlock.Style>
<Style TargetType="TextBlock" BasedOn="MyTextBlockStyle">
<Setter Property="Text" Value="No" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox01, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="Yes!" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
I had created a button and i want to change its color using style from app xaml.
But,i don't get the exact code and i am new to xaml.
Can any one help me with some example.
I am also confused to use which property to change color means background or foreground?
<Window
x:Class="ToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar"
Width="300"
Height="300">
<DockPanel>
<ToolBarTray
DockPanel.Dock="Top"
IsLocked="True"
Orientation="Horizontal">
<ToolBar
x:Name="ToolBar1">
<ToggleButton>
<ToggleButton.Style>
<Style
TargetType="{x:Type ToggleButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Play</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Pause</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</ToolBar>
</ToolBarTray>
</DockPanel>
</Window>
Within a toolbar, the two statements:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
causes the toggle button to appear in the normal state when the toggle button is checked, however nothing changes when you hover over the checked toggle button.
If I wrap the toggle button in another layout, say wrap layout:
<Window
x:Class="ToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar"
Width="300"
Height="300">
<WrapPanel>
<ToggleButton>
<ToggleButton.Style>
<Style
TargetType="{x:Type ToggleButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Play</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Pause</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</WrapPanel>
</Window>
the two statements:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
You can find tutorial in the folowing url
http://social.msdn.microsoft.com/Forums/pl-PL/wpf/thread/7e565a41-0aad-40a3-a3c4-666c5caf38fe
Thanks
Deepak
I have a UserControl in XAML with a couple of buttons....
When the "VideoEnable" property in my C# code change to true I want to change the color of a button.
The following code compiles but crashes and I can't find a right solution
<UserControl.Triggers>
<DataTrigger Binding="{Binding VideoEnable}" Value="true">
<Setter Property="Button.Background" Value="Green" TargetName="VideoButton" />
<Setter Property="Grid.Background" Value="Blue" TargetName="videoGrid" />
</DataTrigger>
</UserControl.Triggers>
Now i have tried with the following code, it does not crash but the background does not change :s
<UserControl.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Videos}" Value="true">
<Setter Property="Button.Background" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
public string Videos
{
get { return m_videos; }
set
{
m_videos = value;
NotifyPropertyChanged("Videos");
}
}
Ok, I found the problem...
This is my button
<Button DataContext="{Binding LensesBtn}" Margin="0,5,0,0" FontSize="14" FontWeight="Bold" Height="40" Opacity="0.8" HorizontalAlignment="Stretch" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Button.Background>#dbebf9</Button.Background>
<Button.BorderBrush>PowderBlue</Button.BorderBrush>
<Button.BorderThickness>4</Button.BorderThickness>
Lenses
</Button>
When I delete the DataContext, Style and Background properties it all works....
But i really need this properties
any tips?
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="Videos" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
this is the example you need if your code is valid.
you can also add a converter in order to check the background and other properties.