Question

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

这里是一个：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>

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

您可以定义一个属性，该属性将与xaml页面中的width属性绑定。您可以根据给定条件从viewmodel控制属性。您可以在xaml窗口页面中控制几乎所有可用的东西。此外，您还可以基于两个属性的配对来定义条件逻辑。例如，如果您的TextContent属性达到特定限制，则将文本宽度属性设置为某些值。

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

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

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

1 个答案: