Select one of two wpf implementations with a bool variable-CodePudding

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?

CodePudding user response：

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>