时间戳

首页 > 解决方案 > 如何使用文本长度更改文本框的宽度？

wpf - 如何使用文本长度更改文本框的宽度？

问题描述

我想从那些打字游戏中重新制作一种游戏，其中单词来自某个地方，你必须正确地写下那个单词。

这是一个：https ://www.youtube.com/watch?v=FqNTKJRBPdc

我的第一个问题是我什么也没找到，我怎么能动态地改变 TextBox 的宽度。

因此，如果整个单词不适合 TextBox，我想增加 TextBox 的宽度。我怎么能做到？

这是我的观点：

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

视图模型：

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

标签： wpfmvvmtriggerstextbox

解决方案

您可以定义一个属性，您将与 xaml 页面中的 width 属性绑定。您可以根据给定条件从 viewmodel 控制属性。您可以控制窗口 xaml 页面中几乎所有可用的内容。此外，您可以根据两个属性的配对定义条件逻辑。就像如果您的 TextContent 属性达到某个限制，则将文本宽度属性设置为某个值。

通过低级别的控制，您可以通过数据触发器实现控制宽度。

<Style>
  <Setter Property="Width" Value="200"/>
  <Style.Triggers>
    <<Put your conditions which will set the value>>
  </Style.Triggers>
</Style>

推荐阅读