Forums | NoesisGUI

Posted: **09 Dec 2018, 03:51**

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

Posted: **10 Dec 2018, 10:30**

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:

<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>

Posted: **12 Dec 2018, 16:54**

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.

 <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>

Posted: **12 Dec 2018, 18:17**

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:

<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>

Here is how the button is declared:

        <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.

Posted: **14 Dec 2018, 16:56**

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.

<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>

To change the FontSize in a particular control you just need to set the property in that control:

<Button Content="Button" FontSize="24"/>

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:

<Setter Property="Padding" Value="0"/>

Forums | NoesisGUI

How do I put a grid inside a button?

How do I put a grid inside a button?

Re: How do I put a grid inside a button?

Re: How do I put a grid inside a button?

Re: How do I put a grid inside a button?

Re: How do I put a grid inside a button?