將文本框系結到按鈕(MVVM)

我正在制作一個應用程式來生成指定時間段（例如一周）的食譜。作為此應用程式的一部分，我必須列出成分串列。這些成分可以由用戶指定，所以我做了一個UserControl添加成分。此 UserControl 包含 6 個TextBox-es 和一個Button. 我想要做的是當用戶單擊按鈕時，用戶（和文本框）指定的成分將被添加到成分串列中。

我正在使用MVVM架構和MultiValueConverter將 TextBoxes 系結到 Button。我注意到 Convert 方法僅在實體化時被呼叫，而不是在我單擊按鈕時被呼叫。

我該如何解決仍然使用 MVVM 的問題？

感謝您的建議和時間！

對應的代碼片段：

AddIngredientView.xaml：

<UserControl.Resources>
        <ResourceDictionary>
            <converters:IngredientConverter x:Key="IngredientConverter"/>
        </ResourceDictionary>
</UserControl.Resources>
    
<StackPanel>
    <TextBlock Text="étel hozzáadása" Foreground="White" FontSize="28" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,0,0,20"/>

    <TextBox Name="nameTextBox"         ToolTip="Név"            Width="250" Height="40" VerticalContentAlignment="Center" HorizontalAlignment="Center" Margin="5" Style="{StaticResource ModernTextbox}"/>
    <TextBox Name="weightTextBox"       ToolTip="T?meg (g)"      Width="250" Height="40" VerticalContentAlignment="Center" HorizontalAlignment="Center" Margin="5" Style="{StaticResource ModernTextbox}"/>
    <TextBox Name="energyTextBox"       ToolTip="Energia (kcal)" Width="250" Height="40" VerticalContentAlignment="Center" HorizontalAlignment="Center" Margin="5" Style="{StaticResource ModernTextbox}"/>
    <TextBox Name="carbohydrateTextBox" ToolTip="Szénhidrát (g)" Width="250" Height="40" VerticalContentAlignment="Center" HorizontalAlignment="Center" Margin="5" Style="{StaticResource ModernTextbox}"/>
    <TextBox Name="proteinTextBox"      ToolTip="Fehérje (g)"    Width="250" Height="40" VerticalContentAlignment="Center" HorizontalAlignment="Center" Margin="5" Style="{StaticResource ModernTextbox}"/>
    <TextBox Name="fatTextBox"          ToolTip="Zsír (g)"       Width="250" Height="40" VerticalContentAlignment="Center" HorizontalAlignment="Center" Margin="5" Style="{StaticResource ModernTextbox}"/>

    <Button Content="További értékek" Foreground="#353340" FontSize="14" Margin="0,10,60,0">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="TextElement.FontFamily" Value="Fonts/#Poppins"/>
                <Setter Property="Background"             Value="DarkGray"/>
                <Setter Property="Cursor"                 Value="Hand"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#353340"/>
                        <Setter Property="Foreground" Value="DarkGray"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Width="130" Height="25" CornerRadius="12" Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
    <Button Content="Hozzáadás" Foreground="#353340" FontSize="14" Margin="500,50,0,0" Command="{Binding AddIngredientCommand}">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="TextElement.FontFamily" Value="Fonts/#Poppins"/>
                <Setter Property="Background" Value="DarkGray"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#353340"/>
                        <Setter Property="Foreground" Value="DarkGray"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Width="100" Height="25" CornerRadius="12" Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Button.Template>
        <Button.CommandParameter>
            <MultiBinding Converter="{StaticResource IngredientConverter}" UpdateSourceTrigger="PropertyChanged">
                <Binding Path="Text" ElementName="nameTextBox"/>
                <Binding Path="Text" ElementName="weightTextBox"/>
                <Binding Path="Text" ElementName="energyTextBox"/>
                <Binding Path="Text" ElementName="carbohydrateTextBox"/>
                <Binding Path="Text" ElementName="proteinTextBox"/>
                <Binding Path="Text" ElementName="fatTextBox"/>
            </MultiBinding>
        </Button.CommandParameter>
    </Button>
</StackPanel>

成分轉換器.cs：

public class IngredientConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return String.Concat(values[0], ",", values[1], ",", values[2], ",", values[3], ",", values[4], ",", values[5]);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return (value as string).Split(',');
    }
}

AddIngredientViewModel.cs：

public class AddIngredientViewModel : ViewModelBase
{
    #region Fields

    private YazioRecipesAddOnModel _model;

    #endregion

    #region Properties

    public DelegateCommand AddIngredientCommand { get; private set; }

    #endregion

    #region Constructor

    public AddIngredientViewModel(YazioRecipesAddOnModel model)
    {
        _model = model;
        AddIngredientCommand = new DelegateCommand(param => AddIngredient(param.ToString()));
    }

    #endregion

    #region Public methods

    public void AddIngredient(String ingredientString)
    {
        if (ingredientString == null)
            return;

        _model.AddIngredient(ingredientString);
    }

    #endregion
}

uj5u.com熱心網友回復：

您應該將每個系結TextBox到視圖模型的不同源屬性，例如：

<TextBox Name="weightTextBox" Text="{Binding Weight}" />

然后，您可以直接在您的AddIngredient方法中訪問這些值：

string ingredientString = string.Concat(this.Weight, "," ...);
_model.AddIngredient(ingredientString);

MVVM 的關鍵方面之一是在視圖模型中實作應用程式邏輯。不要為此使用轉換器。

標籤：C＃ wpf xml 多重绑定

上一篇：從另一個ViewModel訪問ViewModel中的屬性

下一篇：WPF組合框-嘗試輸入時顯示錯誤