I have a Image buttton kind of usercontrol, which has two textblocks and an image inside button, but button is firing click only when I click on textblock or image part. just to do quick debug I have set button's cursor to Hand, strangely its showing Hand cursor only when mouse is over texblocks/Image but not on any part of the button. Here is my code
Name="Tiles" Background="Green"
d:DesignHeight="300" d:DesignWidth="300" Margin="10,10,10,10">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="booleanVisibleConverter" />
<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
<Style x:Key="ImgBtnStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ImgBtnStyle" TargetType="{x:Type Button}">
<Border Name="border"
BorderThickness="1"
Padding="0"
BorderBrush="DarkGray"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding ElementName=Tiles, Path=ResultValue}" Style="{StaticResource txtblck}" Grid.Column="1" Grid.Row="1"/>
<TextBlock Text="{Binding ElementName=Tiles, Path=TestName}" Style="{StaticResource txtblck}" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Bottom" TextAlignment="Left" Padding="5,0,0,5"/>
<Image Source="/resources/Icons/tickBlack.png" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding Path= TestDone, ElementName=Tiles, Converter={StaticResource booleanVisibleConverter}}"/>
</Grid>
</Button>
Set Grid's Background to Transparent like below :
<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
<Grid Background="Transparent">
...
</Button>
I made above changes and it worked fine for me.
Related
When I try to display content from the ContentPresenter I cannot see anything. The test block does not display any text and it seems to be hidden.
<local:ResizableVideoHostWindow x:Class="TestClass"
x:ClassModifier="internal"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
mc:Ignorable="d"
Title="{Binding Title}">
<Window.Style>
<Style TargetType="{x:Type local:ResizableVideoHostWindow}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome
CaptionHeight="30"
CornerRadius="1"
GlassFrameThickness="0,0,0,-1"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
UseAeroCaptionButtons="true"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ResizableVideoHostWindow}">
<Grid x:Name="AppTitleBar" Background="Transparent" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Button
Background="Transparent"
Visibility="Visible"
BorderThickness="0"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="20"
Height="20"
Margin="8,2,0,0"
shell:WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets">
</TextBlock>
</Button>
<TextBlock
FontFamily="Segoe UI"
Grid.Column="1"
Height="20"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextAlignment="Center"
Margin="35,4,0,0"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<Button
Background="Transparent"
Visibility="Visible"
BorderThickness="0"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,160,0"
Width="30"
Height="30"
shell:WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets">
</TextBlock>
</Button>
<ContentPresenter Grid.Row="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter Property="BorderThickness" Value="7" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Style>
<Grid Visibility="Visible">
<TextBlock Text="Test Block" FontSize="20" >
</TextBlock>
<local:AppProxyContainer
DataContext="{Binding ContainerViewModel}" />
</Grid>
</local:ResizableVideoHostWindow>
I am mainly confused on how to display the content. I have seen other posts stating that this method of using ContentPresenter works, but it does not work for me.
You use the ContentPresenter correctly, but you do not set its column in the Grid, so it will be placed in the LeftPaddingColumn column, which has zero Width.
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
Set its attached Grid.Column property to 1, so it will be displayed in the second column, which sizes to the remaining space.
<ContentPresenter Grid.Row="1" Grid.Column="1"/>
I am learning C# and WPF. Now I want to make a customized ListBoxItem. With my own style. Containing some TextBlocks and a Image.
How do I achieve that?
I've tried to derive a Class from ListBoxItem but that dosn't work.
I also created a Style with ControleTemplate but I can't figure out how I can change the Text property of the TextBlocks inside the Template.
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="White"/>
<Setter Property="Height" Value="75"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="test" TargetType="{x:Type ListViewItem}">
<Grid Background="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Margin="0,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.RowSpan="3" VerticalAlignment="Center" HorizontalAlignment="Center" Width="80" Height="{TemplateBinding Height}">
<StackPanel.Background>
<ImageBrush ImageSource="media/pictures/noImage.png"/>
</StackPanel.Background>
</StackPanel>
<TextBlock x:Name="lbl_Heading" Text="HowToAccessThisProperty" Grid.Column="1" Grid.Row="0" FontSize="14" FontWeight="Bold" VerticalAlignment="Center"/>
<TextBlock Name="lbl_Description" Text="HowToAccessThisProperty" Grid.Column="1" Grid.Row="1" FontSize="12" VerticalAlignment="Center"/>
<TextBlock Name="lbl_FurtherInfo" Text="HowToAccessThisProperty" Grid.Column="1" Grid.Row="2" FontSize="10" VerticalAlignment="Center"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you :)
i have defined a controltemplate that is used to windows ,then windows have the same view as basically.
after that ,i should add different controls in different windows. and i have no idea how to add the elements' host in controltemplate to hold different parts of controls which likes the picture bellow.
and one more thing, how to access the controls and how to set the buttons' actions in controltemplate of different window? it should be use a windowBase class to do that ?
first .the screen picture
and the control template file
<ImageSource x:Key="BtnCloseNormal">../images/others/popup_btn_reduction_normal.png</ImageSource>
<ImageSource x:Key="BtnCloseMouseOver">../images/others/popup_btn_reduction_mouseover.png</ImageSource>
<ImageSource x:Key="BtnClosePressed">../images/others/popup_btn_reduction_selected.png</ImageSource>
<Style x:Key="StatedButtonStyle" TargetType="{x:Type c:StatedButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type c:StatedButton}" >
<Grid>
<Border>
<Image x:Name ="btnImg" Source="{Binding NormalBackground ,RelativeSource={RelativeSource TemplatedParent}}" Stretch="Fill"/>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="btnImg" Property="Source" Value="{Binding MouseOverBackground ,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="btnImg" Property="Source" Value="{Binding PressedBackground ,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="WindowBaseStyle" TargetType="{x:Type Window}">
<Setter Property="Background" Value="{x:Null}"></Setter>
<Setter Property="AllowsTransparency" Value="True"></Setter>
<Setter Property="WindowStyle" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{x:Null}">
<Border CornerRadius="10" Background="White" Margin="20">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="270" ShadowDepth="5" RenderingBias="Quality" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="10"/>
<RowDefinition/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblTitle" Grid.Column="0" Margin="20,6,0,0" FontSize="18" FontWeight="Bold"
Content="{TemplateBinding Title}">
</Label>
<c:StatedButton Grid.Column="2" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
<c:StatedButton Grid.Column="3" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
<c:StatedButton Grid.Column="4" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
</Grid>
<Separator Background="LightGray" Grid.Row="1" Height="2"></Separator>
<Grid Grid.Row="2">
<!--some controls will be insert here-->
</Grid>
<Grid Grid.Row="3" Background="Red" >
<!--some controls will be insert here-->
<ContentControl Content="{Binding }"></ContentControl>
</Grid>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the window.xaml
<Window x:Class="WpfApp1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
xmlns:uctrls="clr-namespace:WpfApp1.Uctrls"
mc:Ignorable="d"
Style="{StaticResource WindowBaseStyle}"
Title="Window1 -- title" Height="300" Width="500">
<Grid>
<Label x:Name="lblTitle" Content="title"></Label>
<Button x:Name="BtnTest" Content="Get TextBox1" Click="BtnTestClick"></Button>
<uctrls:UserControlBase>
<Grid>
<Button Content="what "></Button>
</Grid>
</uctrls:UserControlBase>
</Grid>
i have done it myself.
just use code bellow to host new controls
<AdornerDecorator>
<contentpresenter/>
</AdornerDecorator>
and create a windowBase as parent class of new windows.
I have a round-cornered border and I am trying to make its contents to be also round-cornered but my attempts are not working. Basically I am doing a kind of custom MessageBox but simpler, only with one image icon, a text and a button. No title bar. Image icon is changing depending on the type of message.
Stackpanel corners overlaps over border so border corners are not showing rounded.
ATTEMPT #1:
<Border x:Name="MyCustomMessageBox"
CornerRadius="5,5,5,5"
Grid.ZIndex="3"
Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
Width="auto" Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="DarkBlue" BorderThickness="1"
Background="White">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid Background="Blue">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="WhiteSmoke">
<Grid>
<Image VerticalAlignment="Center" HorizontalAlignment="Left"
Source="/Common.MyImages;component/Images/Info.png"
Height="48" Width="48" Margin="20,10">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="1">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
<TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
</TextBlock>
</StackPanel>
<Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0"
Click="btnCustomMessageBox_Click"
HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
</Grid>
</Border>
ATTEMPT #2:
As explained here, I have tried also but without success.
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MyCustomMessageBox}" />
</Grid.OpacityMask>
<!-- Here goes all the above border code -->
</Grid>
The following should solve your issue.
<Border x:Name="MyCustomMessageBox"
CornerRadius="5"
Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
Width="auto" Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="DarkBlue"
BorderThickness="1"
Background="blue">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid> <!-- removed the Background here. Only letting borders provide background. -->
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--
Added a border to fill the top part of the grid with the
whitesmoke color using a borderradius on the top.
Also note that the Background from the stackpanel was removed.
-->
<Border
Grid.Row="0" Grid.Column="0"
Name="mask"
Background="WhiteSmoke"
CornerRadius="5,5,0,0"
/>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Grid>
<Image VerticalAlignment="Center" HorizontalAlignment="Left"
Source="/Common.MyImages;component/Images/Info.png"
Height="48" Width="48" Margin="20,10">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="1">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
<TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
</TextBlock>
</StackPanel>
<Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0"
Click="btnCustomMessageBox_Click"
HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
</Grid>
</Border>
I want to create a notification window using Mahapps.Metro. I defined a new Style for MetroWindow but when Show() is executed, application throws a null exception. If i remove the template override, i have no problem... Any ideas?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ctrl="clr-namespace:MyApp.Controls"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls">
<Style x:Key="ErrorPopup" TargetType="{x:Type Controls:MetroWindow}" BasedOn="{StaticResource {x:Type Controls:MetroWindow}}">
<Setter Property="BorderBrush" Value="{StaticResource ErrorPopupBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="300"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Controls:MetroWindow}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
<Rectangle.Fill>
<SolidColorBrush Color="Red"/>
</Rectangle.Fill>
</Rectangle>
<Button Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Content="X" Padding="0,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Error Title" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<ContentPresenter Grid.Row="2" Grid.Column="1" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
<Controls:MetroWindow x:Class="MyApp.Controls.NotificationPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
Style="{StaticResource ErrorPopup}" ButtonBase.Click="Button_Clicked" Title="Notification Title">
<Controls:MetroWindow.Content>
<TextBlock x:Name="_textContainer" Style="{StaticResource NotificationText}" Text="This is the text to display" TextAlignment="Left" TextWrapping="Wrap"/>
</Controls:MetroWindow.Content>
</Controls:MetroWindow>