I am using VS 2013 and designing a WPF form. The problem is when i design the button with image it displays perfectly but when i run the project it isn't displaying the images over button.
Code
<Button x:Name="btnCommunication" Margin="428,138,448,338" Click="btnCommunication_Click" Width="Auto" Foreground="#FF007EFF">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Purple"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="GreenYellow"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<Grid VerticalAlignment="Center" HorizontalAlignment="Left" Height="236" Width="350">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="0,0,-80,41" Source="Images/communication.png" Width="135" Height="195" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.525,0.37" />
<TextBlock Grid.Column="1" Margin="0,174,-128,30" Text="Communication Mode" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="28" Grid.ColumnSpan="2"/>
</Grid>
</Button>
Hope for help !!
I cleared the Margin and it was OK for me!
Using margin is not a good way for Layering!
For Layering It's better to use Layering elements.Such as StackPanel and etc.
Related
Some functions change the value of a TextBlock in the ListView. I want to access TextBlock value at the end of these functions. How can I do it?
ListView code :
<ListView BorderThickness="0" x:Name="OrderList">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid Background="{TemplateBinding Background}">
<Border BorderBrush="{StaticResource MenuluxRedBrush}" BorderThickness="0,0,0,1" Height="30">
<local:OrderPopUpItem/>
</Border>
<GridViewRowPresenter Grid.RowSpan="2"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
OrderPopUpItem.xaml code :
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding productName}"
VerticalAlignment="Center"
Margin="15,0,0,0"
FontSize="20"/>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="/Images/PopUp/icon_minus_red.png"
MouseLeftButtonUp="azalt"
Name="minusIcon"
Height="30"/>
<TextBlock Text="0"
Grid.Column="1"
Name="amountText"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="20"/>
<Image Source="/Images/PopUp/icon_plus_red.png"
MouseLeftButtonUp="arttir"
Name="plusIcon"
Grid.Column="2"
Height="30"/>
</Grid>
If i understand your question correctly, You can achieve this behind code with C#. You should add the code below to your source code.
//Get ListViewItem
ListViewItem item = (ListViewItem)OrderList.Items.GetItemAt(SatirIndex);
//Get Content from item (use if you want read items value)
string deger = item.content;
//Set items content (use if you want set items value)
item.content = amountText.Text;
I'm trying set backcolor for all grid layout in my project using resource dictionary. This is code of file where i modify my grid.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Theme">
<SolidColorBrush x:Key="GridBackColor" Color="Red"/>
<Style TargetType="Grid">
<Setter Property="Background" Value="{StaticResource GridBackColor}"/>
<Setter Property="Opacity" Value="0.5"/>
</Style>
</ResourceDictionary>
After set Background property all controls on grid were disappear, but when i set opacity i can only say that all controls are under grid layout and any mouse events not work.
Here how it's look like:
this is my window code.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="125"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="125"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Label Content="Name" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" FontSize="20"
HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
<TextBox Name="TbName" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="3" FontSize="20"
HorizontalAlignment="Stretch" />
<Button Content="Add" Name="BtAdd" Grid.Column="1" Grid.Row="4" IsDefault="True"
HorizontalAlignment="Right" VerticalAlignment="Center" Width="100" Click="BtAdd_Click"/>
<Button Content="Close" Name="BtClose" Grid.Column="3" Grid.Row="4" IsCancel="True"
HorizontalAlignment="Left" Width="100" Click="BtClose_Click"/>
</Grid>
When you applied you style globally to all the Grids in your application, the ones used inside other controls will also be affected. For instance take a look at the Window control (from the vs designer, left click on the window > Edit Template > Edit a copy)
<Window.Resources>
<ControlTemplate x:Key="WindowTemplateKey" TargetType="{x:Type Window}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
<ResizeGrip x:Name="WindowResizeGrip" HorizontalAlignment="Right" IsTabStop="false" Visibility="Collapsed" VerticalAlignment="Bottom"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
<Condition Property="WindowState" Value="Normal"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="WindowResizeGrip" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="ResizeMode" Value="CanResizeWithGrip">
<Setter Property="Template" Value="{StaticResource WindowTemplateKey}"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
Notice the Grid defined in the Border inside the ControlTemplate.
An easy fix to your issue is to assign a key to your style and assign it to the Grid manually:
<Style TargetType="Grid" x:Key="GridStyle">
<Setter Property="Background" Value="{StaticResource GridBackColor}"/>
<Setter Property="Opacity" Value="0.5"/>
</Style>
To use it:
<Grid Style="{StaticResource GridStyle}">
...
</Grid>
Is it possible to create some sort of base expander style and override the background color of the header in a derived style?
In my application I'm using expanders a lot and I would like to change the background color of the header. I know I could just copy&paste my style and edit the color, but it would be nicer to just create a new style based on the "base style" and setting the header's background color.
But I do not know how to access this color.
It's the color of this line: below I'd like to change (the border in the header): Border Name="border"... I cannot access "border" in the setter of the derived style...
This is my (base) style:
<Style TargetType="Expander" x:Key="ExpanderStyle">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextColor}}"/>
<Setter Property="Template">
<Setter.Value>
<!-- Control template for expander -->
<ControlTemplate TargetType="Expander" x:Name="exp">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="ContentRow" Height="0"/>
</Grid.RowDefinitions>
<Border Name="border" Grid.Row="0" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" BorderThickness="1" CornerRadius="4,4,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="tb" FontFamily="Marlett" FontSize="9.75" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Foreground="Black" Grid.Column="1" Content="u" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="HeaderContent" Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<Border x:Name="Content" Grid.Row="1" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" >
<ContentPresenter Margin="4" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=Height}" />
<Setter Property="Content" TargetName="tb" Value="t"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I would like to do something like this:
<Style x:Key="ExpanderStyleRed" BasedOn="{StaticResource ExpanderStyle}" TargetType="Expander">
<Setter Property="???" Value="Red"/>
<Style>
Use TemplateBinding:
<Style TargetType="Expander" x:Key="ExpanderStyle">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextColor}}"/>
<Setter Property="Template">
<Setter.Value>
<!-- Control template for expander -->
<ControlTemplate TargetType="Expander" x:Name="exp">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="ContentRow" Height="0"/>
</Grid.RowDefinitions>
<Border Name="border" Grid.Row="0" Background="{TemplateBinding Background}" BorderThickness="1" CornerRadius="4,4,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="tb" FontFamily="Marlett" FontSize="9.75" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Foreground="Black" Grid.Column="1" Content="u" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="HeaderContent" Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<Border x:Name="Content" Grid.Row="1" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" >
<ContentPresenter Margin="4" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=Height}" />
<Setter Property="Content" TargetName="tb" Value="t"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ExpanderStyleRed" BasedOn="{StaticResource ExpanderStyle}" TargetType="Expander">
<Setter Property="Background" Value="#2fff0000"/>
</Style>
And then:
<Grid>
<Expander x:Name="expander1" Style="{DynamicResource ExpanderStyle}" Header="Expander" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="7,10,0,0" Height="108">
<TextBlock Width="250" Height="150" TextWrapping="Wrap">
asklsaklsa saaskklsaklas alsaklalkjd
asklsaklsaklsa saklsaklsakl jsajkjska
saklsaklsakl sasa
</TextBlock>
</Expander>
<Expander x:Name="expander2" Style="{DynamicResource ExpanderStyleRed}" Header="Expander" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,126,0,0" Height="133">
<TextBlock Width="250" Height="150" TextWrapping="Wrap">
asklsaklsa saaskklsaklas alsaklalkjd
asklsaklsaklsa saklsaklsakl jsajkjska
saklsaklsakl sasa
</TextBlock>
</Expander>
</Grid>
I want to make custom style for doubleupdown button like on example.
Example:
What i have
main problem is that <RepeatButton x:Name="PART_IncreaseButton" Grid.Row="0" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource CustomRepeatButtonStyle}"/> does not respond when i am clickin on it why?
Xaml code of me freak:
<Window.Resources>
<Style x:Key="CustomRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid x:Name="customgrid" Background="White">
<Polygon x:Name="custompolygon" Points="1,11 6,1 11,11" Fill="SkyBlue" VerticalAlignment="Center" HorizontalAlignment="Center">
</Polygon>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="custompolygon" Property="Fill" Value="black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomDoubleUpDownStyle" TargetType="{x:Type xctk:DoubleUpDown}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xctk:DoubleUpDown}">
<Border BorderThickness="1" BorderBrush="Purple">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<RepeatButton x:Name="PART_IncreaseButton" Grid.Row="0" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource CustomRepeatButtonStyle}"/>
<RepeatButton x:Name="PART_DecreaseButton" Grid.Row="1" IsTabStop="{TemplateBinding IsTabStop}"/>
</Grid>
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Property=Value}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<xctk:DoubleUpDown Width="180" Height="70" Style="{StaticResource CustomDoubleUpDownStyle}" Value="20"/>
</Grid>
In your XAML there are no functions bound to the click event (or any other event). In other words: From the programs point of view there is nothing to do, when any of your buttons get clicked. Is this your problem?
In this case add event handlers and modify the counter in your model accordingly.
I'm using MahApps Metro Styling in WPF and trying to add a style to the TreeViewItem so that the nodes have a folder icon next to them. (http://mahapps.com/MahApps.Metro/)
This is fairly straight forward, all I have to do is override the TreeViewItem header template and add in the image.
The problem is that for some reason the new template is not applied to the first entry in the tree as you can see blow:
All other tree nodes work fine but the first one refuses to have the style applied.
I have confirmed that this is something to do with the MahApps TreeView styling contained in Controls.TreeView.xaml (a new project without MahApps but with the same custom style works as expected) but I cannot see exactly what is going on.
Does anyone have any experience styling TreeViewItems when using MahApps?
<TreeView Grid.Column="0" Name="FolderView">
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource MetroTreeViewItem}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Name="img"
Width="16"
Height="16"
Stretch="Fill"
Source="Images/Folder.png"
Margin="3"
VerticalAlignment="Center"
/>
<TextBlock Text="{Binding}" Margin="0,0" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>
try this`
<TreeView Grid.Column="0" Name="FolderView">
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25" Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander" IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Height="0" Width="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<ContentPresenter x:Name="PART_Header" ContentSource="Header"/>
<Grid x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Margin="0,-5,0,0">
<ItemsPresenter />
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Name="img" Width="16" Height="16" Stretch="Fill" Source="Images/Folder.png" Margin="3" VerticalAlignment="Center"/>
<TextBlock Text="{Binding}" Margin="0,0" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>
I've found the solution :
You need to disable MahApps Metro style like this : Style="{x:Null}"
<TreeView Style="{x:Null}" Grid.Column="0" Grid.Row="1" >
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="20" Height="20" Stretch="Fill" Source="/Resources/folder.png" />
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>