WPF - MVVM - 从视图模型返回可绑定控件模板

时间:2011-05-09 15:08:43

标签: c# wpf mvvm

我正在尝试在列表视图上显示可用的Wifi网络(使用ManagedWifi SDK)。

我在我的viewmodel中定义了WifiNetwork的ObservableCollection(包含名称,类型,信号强度(int)等),如下所示

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

我已在应用程序资源中定义了控制模板(如1个绿色条和4个白条以指示信号强度&lt; = 20%,2个绿条和3个白条以指示20到40%之间的信号强度等) .xaml如下所示

<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>

现在我需要从视图模型中返回此控件模板,将其绑定到一个按钮,以便在listBox中显示相应的信号强度。

我可能需要从Signal Strength(int)到Control模板进行某种转换。

完成此任务的任何建议/代码示例?

3 个答案:

答案 0 :(得分:1)

这应指导正确的方向:

    <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 :(得分: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>

答案 2 :(得分:0)

另一种方法是在列表框中使用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>

这样做的不利方面是缺乏样式重用,与其他提到的方法不同。