How do I put a grid inside a button?
In WPF, simply putting a grid as the content in a button would work. In Noesis, this exception is thrown:
NoesisException: 'Grid' (Grid) is not a valid value for property 'TextBlock.Text'
Rethrow as NoesisException
NoesisException: 'Grid' (Grid) is not a valid value for property 'TextBlock.Text'
Rethrow as NoesisException
-
sfernandez
Site Admin
- Posts: 2983
- Joined:
Re: How do I put a grid inside a button?
Hi,
Can you please attach the ControlTemplate you are using for the Button?
Because it seems it contains a TextBlock to show the Button.Content property instead of a ContentPresenter.
I verified that using a ControlTemplate like the following is enough to allow a Button contain a Grid:
Can you please attach the ControlTemplate you are using for the Button?
Because it seems it contains a TextBlock to show the Button.Content property instead of a ContentPresenter.
I verified that using a ControlTemplate like the following is enough to allow a Button contain a Grid:
Code: Select all
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Resources>
<ControlTemplate x:Key="btnTemplate" TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Grid.Resources>
<Button Width="200" Height="100" Background="Silver" Padding="20"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Template="{StaticResource btnTemplate}">
<Grid Background="Red"/>
</Button>
</Grid>
Re: How do I put a grid inside a button?
That makes sense. I forgot I made a control template. I did that so I could change the color of the button states. Is there a way to still do this but easily change the button's content to something other than a textblock when needed? If I didn't put the textblock in the control template, the font size didn't change.
Code: Select all
<Style TargetType="Button">
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="Foreground" Value="{StaticResource Button.Static.Foreground}"/>
<Setter Property="FontSize" Value="30"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Height="{TemplateBinding ActualHeight}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="true">
</Border>
<TextBlock Text="{TemplateBinding Content}" Margin="5" FontSize="{TemplateBinding FontSize}"
HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Button.MouseOver.Background}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource Button.Pressed.Background}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="Foreground" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Re: How do I put a grid inside a button?
Hmm, I think I found the problem. I had a textblock style that apparently was overriding the fontsize property - even if you explicitly set it on the button. It seems weird that a style would override a value you set explicitly set on an element.
I think my question is now two-fold:
1): Is there any way to have a "default" textblock fontsize value, like I was doing in the TextBlock style, while still being able to change the font size on a specific button?
2): I changed the TextBlock in the ControlTemplate to a ControlPresenter and removed the TextBlock style's fontsize setter, and now the fontsize changes when you set it on the button. But, it now seems off.
Before: https://i.imgur.com/ujLIbav.png
After: https://i.imgur.com/XpT69t8.png
This is with the same font size. This is what my new ContentTemplate looks like:
Here is how the button is declared:
Sorry for deviating so far from the original question.
I think my question is now two-fold:
1): Is there any way to have a "default" textblock fontsize value, like I was doing in the TextBlock style, while still being able to change the font size on a specific button?
2): I changed the TextBlock in the ControlTemplate to a ControlPresenter and removed the TextBlock style's fontsize setter, and now the fontsize changes when you set it on the button. But, it now seems off.
Before: https://i.imgur.com/ujLIbav.png
After: https://i.imgur.com/XpT69t8.png
This is with the same font size. This is what my new ContentTemplate looks like:
Code: Select all
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"
Padding="{TemplateBinding Padding}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextBlock.FontSize="{TemplateBinding FontSize}"
TextBlock.FontWeight="{TemplateBinding FontWeight}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Button.MouseOver.Background}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource Button.Pressed.Background}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="Foreground" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Code: Select all
<Button Content="Info" Grid.Row="3" Grid.Column="2"
FontSize="24" Margin="5"
Foreground="White" Focusable="False"
Command="{Binding InfoCommand}"/>
Sorry for deviating so far from the original question.
-
sfernandez
Site Admin
- Posts: 2983
- Joined:
Re: How do I put a grid inside a button?
1) FontSize property inherits down the tree so it is not usually set in the control styles, that way you can change it in the root and it will reflect in all controls.
If you choose to specify different font sizes depending on the controls you can do that in the Styles using a Setter. Again, that value will be inherited down the control tree, including the Content. You don't need to bind it in the ContentPresenter.
To change the FontSize in a particular control you just need to set the property in that control:
2) Verify that you have the desired value for Padding property in your buttons. Noesis internal default style will set it to "6,4", to override it you should provide a value in your Button style:
If you choose to specify different font sizes depending on the controls you can do that in the Styles using a Setter. Again, that value will be inherited down the control tree, including the Content. You don't need to bind it in the ContentPresenter.
Code: Select all
<Style TargetType="Button">
<Setter Property="Background" Value="{StaticResources ButtonBg}"/>
...
<Setter Property="FontSize" Value="14"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" ...>
<ContentPresenter
HorizotalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
...
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Code: Select all
<Button Content="Button" FontSize="24"/>
Code: Select all
<Setter Property="Padding" Value="0"/>
Who is online
Users browsing this forum: Google [Bot], vinick and 61 guests