I have three buttons, one on top of the other in XAML like so:
<Grid>
<Button
Width="50"
Height="50"
Background="Red"/>
<Button
Margin="10"
Width="50"
Height="50"
Background="Blue"/>
<Button
Margin="20"
Width="50"
Height="50"
Background="Green"/>
</Grid>
How do I change their Z-Order when the mouse is over them?
Put this to the Grid.Resources
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="99999"/>
</Trigger>
</Style.Triggers>
</Style>
when IsMouseOver is false the button instances gets back its original zindex value
Related
I have a Flyout control on my page and I want to change the background color of it. How can I achieve this?
<Button x:Name="btn" Background="Transparent">
<Image HorizontalAlignment="Center" />
<Button.Flyout >
<Flyout Placement="Left" >
<ListView ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Green" VerticalAlignment="Stretch"
SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Extended" HorizontalAlignment="Stretch" >
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView>
</Flyout>
</Button.Flyout>
</Button>
If I give Background for child element, It gives a margin between flyout and child element, so it's not acceptable. Presently look like this
To change the background color of Flyout, you can try to style the properties of the internal FlyoutPresenter that is presenting the Content of a Flyout. For example:
<Button.Flyout>
<Flyout Placement="Left">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Background" Value="Green"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<ListView ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Green" VerticalAlignment="Stretch" SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Extended" HorizontalAlignment="Stretch" >
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView>
</Flyout>
</Button.Flyout>
My DashBoardSimpleCountObject has 2 values: MyName and MyValue.
I use an ObservableCollection<DashboardSimpleCountObject> called MyData.
I want to show a picture, as long as MyValue is null.
However, the picture ("loading") is only shown at the last item of my ObservableCollection (no matter, how many items are in there). As soon as a MyValue is set (with anything other than null), it is automatically updated and shown correctly - that works fine at all items.
<ItemsControl x:Name="_control" ItemsSource="{Binding MyData}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="25">
<Label FontSize="14" Content="{Binding MyName}" />
<Label Margin="0,25" HorizontalContentAlignment="Right" FontSize="29" FontWeight="ExtraBold" Foreground="{Binding MyColor}">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Content" Value="{Binding MyValue}" />
<Style.Triggers>
<DataTrigger Binding="{Binding MyValue}" Value="{x:Null}">
<Setter Property="Content">
<Setter.Value>
<Image Width="32" Height="32" Source="{DynamicResource loading}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
What am I doing wrong?
Thank you very much in advance! :)
It seems, the nature of DynamicResource causes this issue.
Simply changing DynamicResource to StaticResource did the trick.
So, the DataTrigger worked just fine from the beginning. The image simply did only show up once due to being loaded as a DynamicResource.
I am trying to create a button Style that I can use for a "Lookup" button throughout my UWP app. However, the icon only appears on the first button on the screen. I tried this solution using templates, but it is not working for me. Thanks for the help.
Code:
<Page.Resources>
<ControlTemplate x:Key="FindSymbolTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</ControlTemplate>
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content">
<Setter.Value>
<ContentControl Template="{StaticResource FindSymbolTemplate}" />
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
....
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
....
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
The two buttons in the UI. Only the first has the SymbolIcon content.
#Romasz's solution absolutely works, but what if you want a lightly different Foreground on the SymbolIcon inside another Button?
Here's a potentially more flexible way that I normally go with.
First let's create a base Style that holds some default values for all the icons.
<Style x:Key="Style-Icon-Base"
TargetType="ContentControl">
<!-- If you don't specify the Foreground, it will use its ancestor's -->
<!--<Setter Property="Foreground"
Value="White" />-->
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Padding"
Value="0" />
</Style>
Then we create a new icon Style which inherits from the one above. Note within the ControlTemplate I have used TemplateBinding to make property values dynamic. TemplateBinding isn't available inside a DataTemplate.
<Style x:Key="Style-Icon-Find"
BasedOn="{StaticResource Style-Icon-Base}"
TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<!--
'cause you cannot change the size of the SymbolIcon, we insert a Viewbox here,
otherwise you don't need it.
-->
<Viewbox Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<SymbolIcon Symbol="Find"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This way you have created a highly reusable icon Style, to use it, have a look at the following Buttons:
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Margin="4"
Padding="8"
BorderBrush="LightBlue">
<ContentControl Width="36"
Height="36"
Foreground="DarkCyan"
Style="{StaticResource Style-Icon-Find}" />
</Button>
<!-- Note how I defined the Foreground at the Button level and it flows down to the icon -->
<Button Foreground="DarkGoldenrod"
Margin="4">
<StackPanel Orientation="Horizontal">
<ContentControl Style="{StaticResource Style-Icon-Find}"
Width="16"
Height="16" />
<TextBlock Text="Search"
VerticalAlignment="Center"
Margin="8,0,0,0" />
</StackPanel>
</Button>
<Button Margin="4"
Padding="4">
<ContentControl Style="{StaticResource Style-Icon-Find}" />
</Button>
</StackPanel>
And they look like:
Generally UI elements can be used once (or saying different - have only one parent) - this is probably why it only works for the first button in your case. One solution may be to define DataTemplate and use it as ContentTemplate, so each button creates its own icon:
<Page.Resources>
<DataTemplate x:Key="FindTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</DataTemplate>
</Page.Resources>
...
<Button x:Name="tourNumLookup" ContentTemplate="{StaticResource FindTemplate}"
Grid.Column="1" Margin="10,0" VerticalAlignment="Center" />
<Button x:Name="customerIdLookup" ContentTemplate="{StaticResource FindTemplate}"
VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="10,0" />
You don't need to create ControlTemplate to reuse the icon. You can simply put this SymbolIcon to the resource dictionary and use as StaticResource for the buttons' Content.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
</Page.Resources>
<Button x:Name="tourNumLookup"
Content="{StaticResource FindSymbol}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Content="{StaticResource FindSymbol}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
UPDATE
BTW this is possibly a bug in the UWP platform, because I tried the following code and only the first Button rendered the icon at desing time and none of the at runtime.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content" Value="{StaticResource FindSymbol}"/>
</Style>
</Page.Resources>
<StackPanel>
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Margin="10,0" />
</StackPanel>
I tried to assign the Setter's Value directly but I got the same result. And also tried with FontIcon.
I have created a Style for circular button in windows application. I am using this style to make the buttons appear circular. Code for the Style is below:
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="#FFF8F1F1" />
<Image Width="50" Height="50" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using like below :
<Button x:Name="btnFacebook" Style="{StaticResource CircularButton}" Click="btnFacebook_Click" Visibility="Visible" Margin="10,0" />
Now I have many buttons on the page that need to be circular,but need to have different background images.Is there any way to set the image source of this style for different buttons.I have tried code like below:
<Button x:Name="btnTwitter" Style="{StaticResource CircularButton}" Click="btnTwitter_Click" HorizontalAlignment="Stretch" Margin="10,0">
<ControlTemplate>
<Image Source="Images/appbar.social.twitter.png"/>
</ControlTemplate>
</Button>
Also I have tried placing the image directly inside the button content , or using the template binding for showing the image inside the button.Is there any way of doing this without creating different styles for different buttons.
something like this:
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="#FFF8F1F1" />
<Image Width="50" Height="50" Source="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button x:Name="btnTwitter" Style="{StaticResource CircularButton}" Click="btnTwitter_Click" HorizontalAlignment="Stretch" Margin="10,0">
<BitmapImage UriSource="Images/appbar.social.twitter.png"/>
</Button>
I use a wrapgrid as the itemspaneltemplate in my app
<GridView x:Name="InfoGridView" Margin="50">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" ItemWidth="200" ItemHeight="50" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<TextBlock Text="Name" Style="{StaticResource AppNameTextStyle}" />
<TextBox x:Name="NameTextBox" Width="180"/>
<Button x:Name="AnotherNameButton" Style="{StaticResource AddAppBarButtonStyle}"/>
</GridView>
The TextBlock, TextBox and the Button are display in the middle of the item, how to let them display keep left?
Set this up on the ItemContainerStyle within your GridView by adding the following XAML below your ItemsPanel entry.
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left" />
</Style>
</GridView.ItemContainerStyle>