Select 带有 bool 变量的两个 wpf 实现之一

Question

In my application I want to switch between editing and just displaying data in my view. In order to edit them I have textboxes. For Displaying I am using textblock. Some of the Data is displayed inside a ListView.

In my ViewModel I have variables called "IsEditingMode" and "IsNotEditingMode" to determine the state of the view.

Now I want something like this in wpf:

    <switch betwen implementation>
       <use textbox if IsEditingMode>
       <use textblock if IsNotEditingMode>

I tried this using Converters to change the Visibility of the textbox and the textblock:

Converter:

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,  CultureInfo culture)
    {
        var boolValue = (bool)value;

        if (boolValue)
            return Visibility.Visible;

        return Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Provide the Converter a Resource: <helper:BoolToVisibilityConverter x:Key="IsVisibleConverter"/>

Use the converter to change the Visibility of the elements in my xaml:

    <StackPanel>
        <TextBlock Text ="{Binding TextVariableInVM}" Visibility="{Binding    IsNotEditingMode, Converter={StaticResource IsVisibleConverter}}"/>

        <TextBox Text ="{Binding TextVariableInVM}" 
                         Visibility="{Binding IsEditingMode, 
                         Converter={StaticResource IsVisibleConverter}}"/>

    </StackPanel>

The result is:

• Editing mode: The Textbox is displayed
• Not editing mode: The TextBlock is displayed

For a small number of displayed variables this is just fine. In my real application I have a huge amount of displayed variables and some of them are displayed using listview. In that case my UI is getting really slow.

I believe that this is due to the fact that I bind each variable twice.

Is there a more elegant solution to do that editing <-> not editing switch?

Answer 1

Why not use only a TextBox element for both situations? TextBox has a property called IsReadOnly that you can set to true or false depending on your action.

Is this code enough for your need's? It's a TextBox that binds your text, and changes from edit mode or not.

<TextBox Text="{Binding TextVariableInVM}" IsReadOnly="{Binding IsNotEditingMode}"/>

If you complain about UI being slow, this example will be faster and more elegant because:

• Doesn't need a StackPanel
• One text element instead of two
• Just one extra property needed to check if is editable or not
• Doesn't need to convert from Boolean to Visibility

---

You may also want to remove the TextBox Border when it is read-only by a Style like this:

<Style TargetType="TextBox">
    <Style.Triggers>
        <Trigger Property="IsReadOnly" Value="True">
            <Setter Property="BorderBrush" Value="{x:Null}"/>
        </Trigger>
    </Style.Triggers>
</Style>