i am new in wpf and i have a list as like
<FlowDocumentScrollViewer Name="fdsvList" Grid.Column="0" Grid.Row="2"
xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
HorizontalAlignment="Center" VerticalAlignment="Center" VerticalScrollBarVisibility='Auto'>
<FlowDocument>
<List Name="lstButton">
<ListItem Margin="0 0 0 10" Name="lstItmCheck">
<Paragraph>
<Button Content="{DynamicResource Visa}" Name="btnVisa" Click="btnVisa_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="None">
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Button.Template>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Arial"></Setter>
<Setter Property="FontSize" Value="20"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Paragraph>
</ListItem>
</List>
</FlowDocument>
</FlowDocumentScrollViewer>
it display with the bullet list.
but i don't want bullet in list, i just want simple button without bullet.
How can i do. please help me.
Like this:
<List Name="lstButton" MarkerStyle="None">
You can also do this in the designer, via the properties panel.
Related
I am using Button's content(not background) as image and want to set another image on mouse over. I am trying to set the content as below but fails.
<Button x:Name="Test" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="40,40,0,0" Height="120" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0" Click="Test_Click">
<Button.Content>
<Image Source="Images/Test.png"></Image>
</Button.Content>
<Button.Style>
<Style>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Button.Content" Value=" <Image Source='Images/TestHover.png'></Image> " />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
It"s easy ! check IsMouseover event for Image not for button. Plus check this for different ways to change Image on MouseOver event.
<Button Name="testBtn" Margin="10 0 0 0" Click="TestBtn_OnClick">
<Button.Content>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="Resources/Apps-Dialog-Close-icon.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="Resources/basic-grid-with-center-lines-png-14.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button.Content>
</Button>
Can you try control template
<Button Width="100" Height="100">
<Button.Template>
<ControlTemplate>
<Image Name="image" Source="pack://application:,,,/images/1.png"/>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Setter Property="Source" TargetName="image" Value="pack://application:,,,/images/2.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
I have a Menu Item that won't change its background when I put my mouse over it.
<ControlTemplate x:Key="DropItemStyle" TargetType="MenuItem">
<DockPanel HorizontalAlignment="Left" Background="#FF101315" Height="40" Width="250" Margin="-1,-1,0,0">
<Image Source="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" Height="15" Width="15" Margin="12,0" VerticalAlignment="Center" />
<Label Content="{TemplateBinding Header}" FontFamily="Segoe UI Semibold" FontSize="14" Foreground="White" VerticalAlignment="Center" Margin="-12,-1,0,0" />
<Image Source="Images/icon_right.png" Visibility="{Binding HasItems, Converter={StaticResource btv}, RelativeSource={RelativeSource TemplatedParent}}" />
<DockPanel.Style>
<Style TargetType="DockPanel">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF1A1D1F" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
</DockPanel>
</ControlTemplate>
<MenuItem Header="Logout" Template="{StaticResource DropItemStyle}" Icon="Images/logoutIcon.png" Click="logoutButtonClick" />
Please edit this if there is any mistakes
Setting Background="#FF101315" on the DockPanel has a greater priority than the trigger's setter. Move it to the Style instead:
<DockPanel HorizontalAlignment="Left" Height="40" Width="250" Margin="-1,-1,0,0">
<!-- Skipped for readability -->
<Style TargetType="DockPanel">
<Setter Property="Background" Value="#FF101315"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF1A1D1F" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
I dont understand why image is not displayed. I want different button images for one style.
I tried to set button image as imagebrush in button style, but then I will have the only one picture on all the buttons.
<Button
Height="64" Width="64" Margin="0,0,50,50"
Style="{DynamicResource MyButtonStyle}" VerticalAlignment="Bottom"
HorizontalAlignment="Right">
<Image Source="image1.png"/>
</Button>
<Button
Height="64" Width="64" Margin="0,0,125,50"
Style="{DynamicResource MyButtonStyle}" VerticalAlignment="Bottom"
HorizontalAlignment="Right">
<Image Source="image2.png"/>
</Button>
Button style
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="rectangle" Stroke="Black" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" TargetName="rectangle" Value="0.8"/>
<Setter Property="Stroke" TargetName="rectangle" Value="#FF478CFB"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="OpacityMask" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Effect" TargetName="rectangle">
<Setter.Value>
<BlurEffect/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Your style is missing ContentPresenter. Hence when you set the image as Content of a Button it has nowhere to actually put it when using your Style's ControlTemplate
So something like this:
Note - I've changed your Grid to a Border and thus got rid of a Rectangle embedded inside and added ContentPresenter as a child of Border
<Style x:Key="MyButtonStyle"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="rectangle">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="rectangle"
Property="Opacity"
Value="0.8" />
<Setter TargetName="rectangle"
Property="BorderBrush"
Value="#FF478CFB" />
</Trigger>
<Trigger Property="IsPressed"
Value="True">
<Setter TargetName="rectangle"
Property="OpacityMask"
Value="{x:Null}" />
<Setter TargetName="rectangle"
Property="Effect">
<Setter.Value>
<BlurEffect />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage:
Same as you had -
<Button
Height="64" Width="64" Margin="0,0,125,50"
Style="{DynamicResource MyButtonStyle}" VerticalAlignment="Bottom"
HorizontalAlignment="Right">
<Image Source="image2.png"/>
</Button>
The EditCommandButton style defined below is showing odd behavior; it only shows for the last instance defined (next to the Avatar label below).
I tried making the style x:Shared="true" and using DynamicResource but with the same result.
I do eventually want the button to invisible until request, which is why you see a trigger for that. But until I figure this out I just have the default visibility at visible.
Can someone explain this behavior and offer a fix?
Cheers,
Berryl
Design View
Runtime View
Button Style
<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" >
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="a" Foreground="Navy" FontWeight="Bold" FontFamily="Wingdings 3" FontSize="24" Width="30"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="theBorder" Background="Transparent" CornerRadius="4">
<ContentPresenter x:Name="theContent" Visibility="Visible" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
<Setter TargetName="theBorder" Property="Background" Value="Orange"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Command" Value="{Binding SelectedSatelliteVm.EditCommand}"/>
</Style>
Usage
<DataTemplate x:Key="PersonInfoEditingControlTemplate">
<Grid>
...
<Label Grid.Column="0" Grid.Row="0" ... />
<Button Style="{StaticResource EditCommandButtonStyle}" Grid.Column="1" Grid.Row="0"/>
<TextBlock .../>
<Label Grid.Column="0" Grid.Row="1" ... />
<Button Style="{StaticResource EditCommandButtonStyle}" Grid.Column="1" Grid.Row="1"/>
<TextBlock .../>
<TextBlock Grid.Column="0" Grid.Row="2" .../>
<Button Style="{StaticResource EditCommandButtonStyle}" Grid.Column="1" Grid.Row="2"/>
<Image Grid.Column="2" Grid.Row="2" ... />
</Grid>
</DataTemplate>
EDIT for Rachel
Look Ma, no triggers! Only the last button shows the arrow though...
<Style x:Key="TestCommandButtonStyle" TargetType="{x:Type Button}" >
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="a" Foreground="Navy" FontWeight="Bold" FontFamily="Wingdings 3" FontSize="24" Width="30"/>
</Setter.Value>
</Setter>
<Setter Property="Command" Value="{Binding SelectedSatelliteVm.EditCommand}"/>
</Style>
the FIX
<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" >
<Setter Property="Content" Value="a" />
<Setter Property="Foreground" Value="Navy" />
<Setter Property="FontFamily" Value="Wingdings 3" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Width" Value="30" />
<Setter Property="Height" Value="Auto" />
<Setter Property="Command" Value="{Binding SelectedSatelliteVm.EditCommand}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="theBorder" CornerRadius="4">
<ContentPresenter x:Name="theContent" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="theContent" Property="Visibility" Value="Hidden"/>
<Setter TargetName="theBorder" Property="Background" Value="Transparent"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
<Setter TargetName="theBorder" Property="Background" Value="Orange"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The style as originally written actually had two problems, both fixed by the style above. (by fixed I mean it works as intended, not that it is the 'right' way to do it!):
DP Precedence - this is what Rachel's answer is addressing although her answer. But the only effective fix I found is to set visibility using two triggers for IsMouseOver as shown.
Only the last item in the Grid was showing any content! - this one makes no sense to me, but moving the properties previously in the TextBlock content to Setters on the style fixes that.
Dependencey properties defined in the <Tag> have a higher precedence than items defined in triggers, so will always overwrite them.
For example, in this case the button's Visibility will always be Collapsed regardless of what the trigger is, because the property is defined in the <Button> tag
<Button Visibility="Collapsed">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Property="{Binding SomeValue}">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
To make this trigger work, move the Visibility property to a Style Setter, which has a lower precedence than a Style Trigger, so triggered values will overwrite it
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Property="{Binding SomeValue}">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
See MSDN's Dependency Property Precedence List for more information
Edit
As for your second problem about the Content only showing up once, I suspect it is because you have the Content bound in your style, and not the ContentTemplate.
WPF is creating a single instance of the TextBlock arrow, and a control can only have one parent, so after the style is applied, so only one Button can contain the arrow TextBlock
The fix is to use the ContentTemplate property instead of the Content property.
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="a" Foreground="Navy" FontWeight="Bold" FontFamily="Wingdings 3" FontSize="24" Width="30"/>
</DataTemplate>
</Setter.Value>
</Setter>
Honestly, I'm surprised it didn't give you an error about Specified element is already the logical child of another element. That is usually what happens in these kind of cases (see my post here for more details)
I'm looking to have the foreground of the text of a TabItem change whenever the tab becomes active. I was using the following, which was working fine until I changed the type of content being displayed in the tab:
<TabControl Style="{DynamicResource SidebarTabControl}">
<TabItem Header="TabItem" Style="{DynamicResource SidebarTab}" />
</TabControl>
<Style x:Key="SidebarTabForegroundStyleSelected">
<Setter Property="TextBlock.Foreground" Value="White" />
</Style>
<Style x:Key="SidebarTabForegroundStyle">
<Setter Property="TextBlock.Foreground" Value="Black" />
</Style>
<Style x:Key="SidebarTab" TargetType="TabItem">
<Setter Property="Padding" Value="10,12,2,12" />
<Setter Property="BorderThickness" Value="0,1,0,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Padding="{TemplateBinding Padding}"
Name="tab"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource SidebarTabBorderBrush}"
SnapsToDevicePixels="True">
<ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
<Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
<Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I changed the TabItem to:
<TabControl Style="{DynamicResource SidebarTabControl}">
<TabItem Style="{DynamicResource SidebarTab}">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Source="..\..\Icons\cog.png" />
<TextBlock Text="TabItem" Margin="5,0,0,0" VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
</TabItem>
</TabControl>
The foreground of the text no longer turns to white when the tab is selected and back to black when the tab is no longer selected. Everything else still works correctly.
Does anyone know if there is a way to accomplish changing the color of the foreground in the XAML above?
Move the trigger from the control template to the style:
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="SidebarTabBackgroundBrushSelected" Color="Gray"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBorderBrushSelected" Color="Blue"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBackgroundBrush" Color="LightGray"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBorderBrush" Color="Green"></SolidColorBrush>
<Style x:Key="SidebarTab" TargetType="TabItem">
<Setter Property="Padding" Value="10,12,2,12" />
<Setter Property="BorderThickness" Value="0,1,0,1" />
<Setter Property="Foreground" Value="Blue"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Padding="{TemplateBinding Padding}"
Name="tab"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource SidebarTabBorderBrush}"
SnapsToDevicePixels="True">
<ContentPresenter Name="content"
ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<TabControl Style="{DynamicResource SidebarTabControl}">
<TabItem Header="TabItem 1" Style="{DynamicResource SidebarTab}" />
<TabItem Style="{DynamicResource SidebarTab}" >
<TabItem.Header>
<StackPanel>
<TextBlock Text="a"></TextBlock>
<TextBlock Text="b"></TextBlock>
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Header="TabItem 3" Style="{DynamicResource SidebarTab}" />
</TabControl>
</Grid>
It looks like the issue is coming up because you are setting the wrong property:
<Style x:Key="SidebarTabForegroundStyleSelected">
<Setter Property="TextBox.Foreground" Value="White" />
</Style>
<Style x:Key="SidebarTabForegroundStyle">
<Setter Property="TextBox.Foreground" Value="Black" />
</Style>
You need to be setting TextElement.Foreground or TextBlock.Foreground
Also, since it is an inherited property, you can just set the AttachedProperty directly on the TabItems, you don't need to assign it specifically to the content.
<TabControl Style="{DynamicResource SidebarTabControl}">
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="TextElement.Foreground"
Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</TabControl.ItemContainerStyle>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16"
Source="..\..\Icons\cog.png" />
<TextBlock Text="TabItem"
Margin="5,0,0,0"
VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
Item 1
</TabItem>
<TabItem>
<TabItem.Header>
<TextBlock Text="Tab 2" />
</TabItem.Header>
Item 2
</TabItem>
<TabItem Header="Item 3">
Item 3
</TabItem>
</TabControl>