WPF binding TextBox with ResourceDictionary-CodePudding

I have a TextBox and I made a ResourceDictionary for it for designing purpose. How can I bind it's Text property to its ViewModel in MVVM architecture? The current code is not working.

TextboxTheme.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type TextBox}" x:Key="ModernTextbox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border CornerRadius="10" Background="#353340" Width="200" Height="30">
                        <Grid>
                            <Rectangle StrokeThickness="1"/>
                            <TextBox Margin="1" BorderThickness="0" Background="Transparent" VerticalContentAlignment="Center" Padding="5" Foreground="#CFCFCF" x:Name="SearchBox"/>
                            <TextBlock IsHitTestVisible="False" Text="{TemplateBinding ToolTip}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" FontSize="11" Foreground="DarkGray" Grid.Column="1">
                                <TextBlock.Style>
                                    <Style TargetType="{x:Type TextBlock}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Text, ElementName=SearchBox}" Value="">
                                                <Setter Property="Visibility" Value="Visible"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

An example for TextBox in the corresponding View (SettingsView.xaml):

<TextBox Text="{Binding DailyCalories}" ToolTip="Napi kalóriamennyiség" Width="250" Height="30" VerticalContentAlignment="Center" HorizontalAlignment="Center" Margin="2" Style="{StaticResource ModernTextbox}"/>

The property in the viewmodel:

private String _dailyCalories;
public String DailyCalories
{
    get { return _dailyCalories; }
    set
    {
        if (_dailyCalories != value)
        {
            _dailyCalories = value;
            OnPropertyChanged();
        }
    }
}

App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Theme/TextboxTheme.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

CodePudding user response：

You missed to bind the Text property inside of your template.

It is as simple as

<TextBox
  x:Name="SearchBox"
  Margin="1"
  Padding="5"
  VerticalContentAlignment="Center"
  Background="Transparent"
  BorderThickness="0"
  Foreground="#CFCFCF"
  Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, UpdateSourceTrigger=PropertyChanged}" />