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

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

Why do you want to do this dynamically? Just make the textbox have the sufficient width for the longest expected word right from the get-go (set the width of you Grid column(s) appropriately) . Much easier to do... — , Nov 23 '18 at 21:14
Possible duplicate of [How to calculate WPF TextBlock width for its known font size and characters?](https://stackoverflow.com/questions/9264398/how-to-calculate-wpf-textblock-width-for-its-known-font-size-and-characters) — , Nov 24 '18 at 08:45
Note that the duplicate question is using a TextBlock element, but the approach is of course exactly the same for a TextBox. Just account for any borders/padding your textbox has... — , Nov 24 '18 at 08:46

AlphaWarrior · Answer 1 · 2018-11-25T07:35:08.793

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>

edited Nov 25 '18 at 07:35

answered Nov 24 '18 at 04:53

AlphaWarrior

57
1
9

It was my idea too, but I hoped that there is an easier solution. – AME Nov 24 '18 at 07:25
@AME there could be other ways too but I doubt your "easier solution" because any how you need to involve data binding for the level of control you need.If you requirement if for little control i.e you know precisely how much width you need to keep and on what condition then you can opt for data triggers or other type style triggers.I have edited my answer for one such reference. – AlphaWarrior Nov 25 '18 at 07:32

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

1 Answers1