Geek asks and answers

WPF - MVVM - Reverse Binding Control Pattern from View Model

I am trying to display the available Wi-Fi networks (using the ManagedWifi SDK) in the list.

I defined an ObservableCollection WifiNetwork (contains name, type, signal strength (int), etc.) in my view model, as shown below

public ObservableCollection<WifiNetwork> AvailableNetworks { get; set; }

I defined control patterns (for example, 1 green bar and 4 white bars to indicate the signal level <= 20%, 2 green bars and 3 white bars to indicate the signal level from 20 to 40%, etc.) in the Resources application .xaml application as below

<ControlTemplate x:Key="Signal1">
    <Canvas Width="32" Height="32" Canvas.Left="0" Canvas.Top="0">
        <Rectangle Width="5.4375" Height="11.375" Canvas.Left="0.0937499" Canvas.Top="20.6563" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF37F307"/>
        <Rectangle Width="6.40625" Height="16" Canvas.Left="5.34375" Canvas.Top="16.0313" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
        <Path Width="6.88835" Height="21.6562" Canvas.Left="11.75" Canvas.Top="10.375" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 12.2768,10.875L 18.1384,10.875L 18.1115,31.5313L 12.25,31.5313L 12.2768,10.875 Z "/>
        <Rectangle Width="6.78126" Height="26.9687" Canvas.Left="18.5625" Canvas.Top="5.09376" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
        <Rectangle Width="6.71874" Height="31.8437" Canvas.Left="25.2812" Canvas.Top="0.250002" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
    </Canvas>
</ControlTemplate>

<ControlTemplate x:Key="Signal2">
    <Canvas Width="32" Height="32" Canvas.Left="0" Canvas.Top="0">
        <Rectangle Width="5.4375" Height="11.375" Canvas.Left="0.0937499" Canvas.Top="20.6563" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF37F307"/>
        <Rectangle Width="6.40625" Height="16" Canvas.Left="5.34375" Canvas.Top="16.0313" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF37F307"/>
        <Path Width="6.88835" Height="21.6562" Canvas.Left="11.75" Canvas.Top="10.375" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 12.2768,10.875L 18.1384,10.875L 18.1115,31.5313L 12.25,31.5313L 12.2768,10.875 Z "/>
        <Rectangle Width="6.78126" Height="26.9687" Canvas.Left="18.5625" Canvas.Top="5.09376" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
        <Rectangle Width="6.71874" Height="31.8437" Canvas.Left="25.2812" Canvas.Top="0.250002" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
    </Canvas>
</ControlTemplate>

Now I need to return this control template from my view model in order to bind it to a button to show the corresponding signal strength in my list.

I probably need to have some kind of conversion from Signal Strength (int) to a control pattern.

/ ?

+3
3

:

    <ItemsControl ItemsSource="{Binding AvailableNetworks }">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="20" Height="{Binding SignalStrength,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                     Fill="{Binding Color,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></Rectangle>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
+1

Darek, , , , , :

<Style TargetType="{x:Type MyControl}">
   <Style.Triggers>
       <DataTrigger Binding="{Binding SignalStrength}" Value="1">
          <Setter Property="ControlTemplate" Value="{StaticResource Signal1}"/>
       </DataTrigger>
       <DataTrigger Binding="{Binding SignalStrength}" Value="2">
          <Setter Property="ControlTemplate" Value="{StaticResource Signal2}"/>
       </DataTrigger>
       <!-- and so on -->
   </Style.Triggers>
</Style>
+1

ItemTemplate .

ColorConverter :

public class ColorConverter : IValueConverter
{
    #region Implementation of IValueConverter

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            var val = System.Convert.ToInt32(value.ToString());
            var param = System.Convert.ToInt32(parameter.ToString());

            return val >= param ? Brushes.Green : Brushes.White;

        }
        catch
        {
            return Brushes.White;
        }
    }

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

    #endregion
}

ListBox :

<Window.Resources>
    <Converters:ColorConverter x:Key="colorConverter" />
</Window.Resources>

, "" xaml:

xmlns:Converters="clr-namespace:ProjectNameHere"

DataTemplate , , :

<ListBox Margin="0,73,0,0" ItemsSource="{Binding AvailableNetworks}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Canvas Width="32"
                        Height="32"
                        Canvas.Left="0"
                        Canvas.Top="0">
                    <Rectangle Width="5.4375"
                               Height="11.375"
                               Canvas.Left="0.0937499"
                               Canvas.Top="20.6563"
                               Stretch="Fill"
                               StrokeLineJoin="Round"
                               Stroke="#FF000000"
                               Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=0}" />
                    <Rectangle Width="6.40625"
                               Height="16"
                               Canvas.Left="5.34375"
                               Canvas.Top="16.0313"
                               Stretch="Fill"
                               StrokeLineJoin="Round"
                               Stroke="#FF000000"
                               Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=20}" />
                    <Path Width="6.88835"
                          Height="21.6562"
                          Canvas.Left="11.75"
                          Canvas.Top="10.375"
                          Stretch="Fill"
                          StrokeLineJoin="Round"
                          Stroke="#FF000000"
                          Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=40}"
                          Data="F1 M 12.2768,10.875L 18.1384,10.875L 18.1115,31.5313L 12.25,31.5313L 12.2768,10.875 Z " />
                    <Rectangle Width="6.78126"
                               Height="26.9687"
                               Canvas.Left="18.5625"
                               Canvas.Top="5.09376"
                               Stretch="Fill"
                               StrokeLineJoin="Round"
                               Stroke="#FF000000"
                               Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=60}" />
                    <Rectangle Width="6.71874"
                               Height="31.8437"
                               Canvas.Left="25.2812"
                               Canvas.Top="0.250002"
                               Stretch="Fill"
                               StrokeLineJoin="Round"
                               Stroke="#FF000000"
                               Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=80}" />
                </Canvas>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

, .

0
source

More articles:


All Articles