I was under the impression that a ContentPresenter would display the content of a Control.
However, if I use this :
<Button Content="Remove table">
<Button.Template>
<ControlTemplate>
<Grid x:Name="grid" >
<Border x:Name="border" BorderBrush="Black" BorderThickness="1" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
No text actually gets displayed.
Where am I mistaken ?
Adding the TargetType="Button" will show the text you are expecting.
<ControlTemplate TargetType="Button">
Reference:
http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter.aspx
Related
I trying to use the Style to reuse.
I saw the article as follows.
https://charlesk.tistory.com/66
The article shows how to extend the control to use the existing style.
I became curious about how the style structure to be when a new control is created by extending the existing style.
For example, in the article defined the HeaderedContentControl that has "Style_HeaderedContentControl" key as below.
<Style x:Key="Style_HeaderedContentControl" TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<Border Background="WhiteSmoke"
BorderBrush="DarkGray"
BorderThickness="1"
Margin="5">
<StackPanel Background="WhiteSmoke"
Margin="5">
<ContentPresenter ContentSource="Header"
TextBlock.FontWeight="Bold"
Margin="0,0,0,5"/>
<ContentPresenter />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And create a new control by extending the above style as below.
<HeaderedContentControl Header="재생" Grid.Column="1"
Style="{DynamicResource Style_HeaderedContentControl}">
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
</HeaderedContentControl>
Here, I wonder how the HeaderedContentControl structure to be.
The candidates I think are:
<Border Background="WhiteSmoke"
BorderBrush="DarkGray"
BorderThickness="1"
Margin="5">
<StackPanel Background="WhiteSmoke"
Margin="5">
<ContentPresenter ContentSource="Header"
TextBlock.FontWeight="Bold"
Margin="0,0,0,5"/>
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
<ContentPresenter />
</StackPanel>
</Border>
or
<Border Background="WhiteSmoke"
BorderBrush="DarkGray"
BorderThickness="1"
Margin="5">
<StackPanel Background="WhiteSmoke"
Margin="5">
<ContentPresenter ContentSource="Header"
TextBlock.FontWeight="Bold"
Margin="0,0,0,5"/>
<ContentPresenter />
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
</StackPanel>
</Border>
or
<Border Background="WhiteSmoke"
BorderBrush="DarkGray"
BorderThickness="1"
Margin="5">
<StackPanel Background="WhiteSmoke"
Margin="5">
<ContentPresenter ContentSource="Header"
TextBlock.FontWeight="Bold"
Margin="0,0,0,5"/>
<ContentPresenter />
</StackPanel>
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
</Border>
How is the right answer? and could you tell me why the structure to be?
Thanks for reading.
When you do this...
<HeaderedContentControl Header="재생" Grid.Column="1"
Style="{DynamicResource Style_HeaderedContentControl}">
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
</HeaderedContentControl>
.. you are setting the content of the control to be that StackPanel. The style, however, sets the template, which dictates the overall look of the control and specifies where the content should go with this line:
<ContentPresenter />
So what you get in the end is everything in Style_HeaderedContentControl, but with that <ContentPresenter /> replaced with the content that you provided.
A more simple example is what happens when you declare a ContentControl with some content, all you see is the content you've provided:
<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="This is the content" Background="CornflowerBlue" />
</ContentControl>
Which shows this:
Now let's declare a template for it, and set it with Template="{StaticResource MyTemplate}":
<ControlTemplate x:Key="MyTemplate" TargetType="{x:Type ContentControl}">
<GroupBox Header="This is the template">
<ContentPresenter />
</GroupBox>
</ControlTemplate>
Now you've completely changed the whole look of the control, but your content appears where you've specified with <ContentPresenter />:
I have created a Groupbox resource directory, and created a style that affects the groupbox.
Here is my Resource Directory code:
<Style x:Key="grpNumbers" TargetType="GroupBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupBox">
<Border
BorderThickness="1"
BorderBrush="#25A0DA" CornerRadius="10">
<Label HorizontalAlignment="Left" Content="Carrier" Foreground="White" Background="#151515" Height="38"
Margin="30,-195,0,0"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The issue is that I want the group box style to not be coupled with the Content in the Label.
Currently it is getting instantiated in the mainwindow like this:
<GroupBox Style="{StaticResource ResourceKey=grpNumbers}" Grid.Column="1" BorderBrush="#272727" Grid.Row="1" Height="200" Margin="20" HorizontalAlignment="Stretch" Header="Carrier information" Foreground="White" FontSize="20" BorderThickness="0.2">
</GroupBox>
But obviously the above groupboxes' Header tag isn't overriding the header of my custom groupbox but I need it too, can this be done?
Label inside ContentTemplate can use TemplateBinding to bind Header:
<Label Content="{TemplateBinding Header}"/>
You should modify your Style too look like this:
<Style x:Key="grpNumbers" TargetType="{x:Type GroupBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid>
<Border BorderThickness="1"
BorderBrush="#25A0DA"
CornerRadius="10">
<Label HorizontalAlignment="Left"
Content="{TemplateBinding Header}"
Foreground="White"
Background="#151515"
Height="38"
Margin="30,-195,0,0"/>
</Border>
<!-- Responsible for displaying what you put inside of your GroupBox -->
<ContentPresenter Margin="5,25,5,5" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
which can then be used like this:
<GroupBox Style="{StaticResource grpNumbers}"
Grid.Column="1"
BorderBrush="#272727"
Grid.Row="1"
Height="200"
Margin="20"
HorizontalAlignment="Stretch"
Header="Carrier information"
Foreground="White"
FontSize="20"
BorderThickness="0.2">
<TextBox /> <!-- or whatever you want inside your GroupBox -->
</GroupBox>
Currently I am working on wpf popup which contains a label, which constitute of textblocks inside the control template. Here my issue is that popup has a bottom border shadow. Already a border is there for the popup along with that this shadow effect increases the bottom border thickness, which looks like this (check the link below to see the screenshot for popup).
Wpf code is like this
Label Control template style
<Style x:Key="popuplabelstyle" TargetType="{x:Type Label}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="Red" x:Name="labelBorder" BorderThickness="1" Padding="12" Background="White" Height="auto" MinHeight="260" Width="220">
<StackPanel>
<TextBlock Text="ABCD" Margin="0,0,0,4" />
<TextBlock Text="abcd" Margin="0,4,0,0" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
xaml code for popup
<Popup x:Name="Mypopup" Panel.ZIndex="2" Placement="MousePoint" HorizontalOffset="10" VerticalOffset="10" IsOpen="{Binding ">
<Label Style="{StaticResource popuplabelstyle}"/>
</Popup>
I don't know why it's happening like this. Can anyone help me to solve this?
See the screenshot of the popup in below link
Try to set the SnapsToDevicePixels and/or UseLayoutRounding property of the Border to True to enable pixel snap rendering:
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="Red" x:Name="labelBorder"
BorderThickness="1" Padding="12" Background="White" Height="auto" MinHeight="260" Width="220"
SnapsToDevicePixels="True" UseLayoutRounding="True">
<StackPanel>
<TextBlock Text="ABCD" Margin="0,0,0,4" />
<TextBlock Text="abcd" Margin="0,4,0,0" />
</StackPanel>
</Border>
</ControlTemplate>
This should make the Border look sharper.
When should I use SnapsToDevicePixels in WPF 4.0?
I have the following control template.
I wish to set the source property for the image control in the control
template using Template Binding.
But since this is a control template for button control and the button control doesn't
have source property, i can't use TemplateBinding in this case.
<ControlTemplate x:Key="BtnTemplate" TargetType="Button">
<Border CornerRadius="5" Margin="15" Cursor="Hand">
<StackPanel>
<Image Name="Img" Style="{StaticResource ImageStyle}" Source="temp.jpg" Height="100" Width="100" Margin="5"></Image>
<Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label>
</StackPanel>
</Border>
</ControlTemplate>
Since i have to set different images for different instances of button, i can't hardcode the path as well.
Please let me know how to tackle this situation.
I'd suggest using dynamic resources, e.g. define the template as follows:
<ControlTemplate x:Key="buttonTemplate" TargetType="Button">
<Border CornerRadius="5" Margin="15" Cursor="Hand">
<StackPanel Orientation="Horizontal" Background="Yellow">
<Image Source="{DynamicResource ResourceKey=Img}" Height="100" Width="100" Margin="5"></Image>
<Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label>
</StackPanel>
</Border>
</ControlTemplate>
And use it like this:
<Button Content="Button" Template="{StaticResource ResourceKey=buttonTemplate}">
<Button.Resources>
<ImageSource x:Key="Img">SomeUri.png/</ImageSource>
</Button.Resources>
</Button>
TemplateBinding is a lightweight "binding", it doesn't support some features of traditional Binding, such as automatically type conversion using the known type converters associated with the target property (such as converting the string URI into a BitmapSource instance).
The following code can work properly:
<Window x:Class="GridScroll.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2">
<Window.Resources>
<Style TargetType="{x:Type Button}" x:Key="ButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" Margin="15" Cursor="Hand" Background="Red">
<StackPanel Orientation="Horizontal" Background="White">
<Image Name="Img" Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Margin="5"></Image>
<Label Content="{TemplateBinding Content}" Margin="2"></Label>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Button Style="{StaticResource ButtonStyle}" Tag="a.jpeg" Content="a"/>
<Button Style="{StaticResource ButtonStyle}" Tag="b.png" Content="b"/>
</StackPanel>
You haven't really said how you expect consumers of your button to set the source. You could use the Button.Tag property, for example, and then bind to that in your template. Or you could define your own control:
public class ImageButton : Button
{
// add Source dependency property a la Image
}
And then the template:
<ControlTemplate TargetType="ImageButton">
<Border CornerRadius="5" Margin="15" Cursor="Hand">
<StackPanel>
<Image Name="Img" Style="{StaticResource ImageStyle}" Source="{TempateBinding Source}" Height="100" Width="100" Margin="5"></Image>
<Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label>
</StackPanel>
</Border>
</ControlTemplate>
I'm not sure that I understood your problem very well but why don't you use ContentPresenter? It allows to move the code for your Image at the higher level.
<ControlTemplate x:Key="BtnTemplate" TargetType="Button">
...
<ContentPresenter/>
</ControlTemplate>
...
<Button Template="{StaticResource BtnTemplate}">
<Image .../>
</Button>
Wpf dropshadow disappears.
Here is how to reproduce.
Type the following in xaml pad.
<Page.Resources>
<DropShadowEffect x:Key="shadow"
Opacity="1"
ShadowDepth="1"
Color="Blue"
BlurRadius="30"/>
</Page.Resources>
<Grid>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd"
BorderBrush="Black" BorderThickness="1"
Background="Yellow"
CornerRadius="8"
Effect="{StaticResource shadow}">
<TextBlock Text="Hello out there" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
You should see some text with a border abound it, and a drop shadow around the border.
Now change the Margin="0,0,0,0" to Margin="0,300,0,0", and size your xaml pad window so you can see the border. On my machine, the drop shadow is now gone.
Anyone else see this? Please help.
I wish I had a good explanation for you, but there were some weird things in your XAML that I played with and I think I have a solution for you.
If you use a Grid, most likely you want to lay out a specific number of rows and columns. You should specify those. This doesn't affect your problem, however.
Likewise, you should specify the Row and Column for your element because you'll eventually need to put this information in your XAML anyway. It's a good habit to start with IMO.
The problem that I can't explain is with the combination of HorizontalAlignment and VerticalAlignment. When you put the Button in the Grid, I would expect the Button to take up the entire space, but it doesn't. The only way you can make this work as far as I could figure out was to specify Height and Width. If you do this, the Effect will work. I found that the threshold in your original XML was a total Y margin of 239. For example, if you used 0,239,0,0, it would fail. If you used 0,139,0,100, it would also fail because the sum is 239. Weird stuff.
Here's my XAML that works:
<Page.Resources>
<DropShadowEffect x:Key="shadow"
Opacity="1"
ShadowDepth="2"
Color="Blue"
BlurRadius="30"/>
</Page.Resources>
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Width="90" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,300,0,0" Grid.Row="0" Grid.Column="0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd"
BorderBrush="Black" BorderThickness="1"
Background="Yellow"
CornerRadius="8"
Effect="{StaticResource shadow}">
<TextBlock Text="Hello out there" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
EDIT The OP does not want to specify a size for the Button because the Content of the Button can change dynamically. It turns out that if you set the MinHeight to something like 18 (I think this is reasonable for most content), the dropshadow effect will work again.
<Border x:Name="Bd" BorderBrush="Black" BorderThickness="1" Background="Yellow" CornerRadius="8" Effect="{StaticResource shadow}" MinHeight="18">
<StackPanel Orientation="Vertical">
<TextBlock>hi</TextBlock>
<TextBlock>there</TextBlock>
</StackPanel>
</Border>