Question

我正在尝试在列表视图上显示可用的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模板进行某种转换。

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

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

Answer 2

我喜欢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>

Answer 3

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

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

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

3 个答案: