How can I change the TextBox's width with the text Length? - wpf

Question

I want to remake one kind of game from those typing games, where the words are coming from somewhere and you have to write down that word correctly.
Here is one: https://www.youtube.com/watch?v=FqNTKJRBPdc
My first problem is that I don't find nothing, how could I change dynamically the TextBox's width.
So if the whole word won't fit in the TextBox, I want to increase the TextBox's width. How could I do it?
Here is my View:
<UserControl x:Class="Prog_korny.View.GameView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Prog_korny"
xmlns:vm="clr-namespace:Prog_korny.ViewModel"
mc:Ignorable="d"
d:DesignHeight="720" d:DesignWidth="1280" Name="alUO">
<UserControl.Resources>
<vm:GameViewModel x:Key="GameViewModel"/>
</UserControl.Resources>
<Grid DataContext="{Binding Source={StaticResource GameViewModel}}">
<Grid.Background>
<ImageBrush ImageSource="/Prog korny;component/Pictures/background.png"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="7*" />
<RowDefinition Height="1*" />
<RowDefinition Height="6*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Canvas Grid.ColumnSpan="5" Grid.RowSpan="4"></Canvas>
<TextBox x:Name="txtText" Grid.Column="2" Grid.Row="1" Grid.ColumnSpan="1" Background="Transparent" Foreground="White" BorderBrush="Blue" FontFamily="Bebas Neue" FontSize="35" TextAlignment="Center" VerticalAlignment="Center" Cursor="Hand">
<TextBox.Text>
<Binding Path="textContent" UpdateSourceTrigger="PropertyChanged"/>
</TextBox.Text>
</TextBox>
<Label x:Name="lblLevel" Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="1" Foreground="White" BorderBrush="{x:Null}" FontFamily="Bebas Neue" FontSize="30" Cursor="Hand">
<Label.Content>
<Binding Path="LevelLabel" UpdateSourceTrigger="PropertyChanged"/>
</Label.Content>
</Label>
<Label x:Name="lblScore" Grid.Column="4" Grid.Row="4" Grid.ColumnSpan="1" Foreground="White" BorderBrush="{x:Null}" FontFamily="Bebas Neue" FontSize="30" Cursor="Hand">
<Label.Content>
<Binding Path="ScoreLabel" UpdateSourceTrigger="PropertyChanged"/>
</Label.Content>
</Label>
</Grid>
</UserControl>
ViewModel:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Prog_korny.ViewModel
{
class GameViewModel : ViewModelBase
{
private string _textContent;
public string TextContent
{
get { return _textContent; }
set { _textContent = value; }
}
private string _levelLabel = "Level: 0";
public string LevelLabel
{
get { return _levelLabel; }
set { _levelLabel = value; }
}
private string _scoreLabel = "Score: 0";
public string ScoreLabel
{
get { return _scoreLabel; }
set { _scoreLabel = value; }
}
}
}

Answer 1

you can define a property which you will bind with the width property in xaml page.
You can control the property from viewmodel based on your given condition.
You can control almost everything which is available to you in your window xaml page.Plus you can define conditional logic based on pairing of two properties.
like if your TextContent property reaches certain limit then set text width property to something.
With low level of control you can achieve controlling width via data triggers.
<Style>
<Setter Property="Width" Value="200"/>
<Style.Triggers>
<<Put your conditions which will set the value>>
</Style.Triggers>
</Style>