Question

此按钮的作用是循环显示可用的颜色列表并相应地更改背景颜色。

最初我在一个大/主视图模型中有这部分视图模型代码，但决定拆分它，以便我的每个用户控件都有自己的视图模型。我已经尝试在OnChangeColor（）方法执行的地方设置一个断点，我看到State确实发生了变化，但似乎没有持续改变转换器因此根本不更新UI的背景颜色。

我已在下面发布了我编辑过的代码，目前我正在努力找出问题所在。

主窗口

    <Window.DataContext>
    <local:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
    <DataTemplate DataType="{x:Type local:CameraListViewModel}">
        <local:MainView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type rep:ReportViewModel}">
        <rep:ReportView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type cam:CameraMonitorViewModel}">
        <cam:CameraMonitorView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type cam:CameraPropertiesViewModel}">
        <cam:CameraPropertiesView />
    </DataTemplate>
</Window.Resources>
<Grid>
    <ContentControl Content="{Binding CurrentViewModel}" />
</Grid>

查看型号：

public class CameraPropertiesViewModel : ViewModelBase
{    
    /// <summary>
    /// The current state of the background color
    /// </summary>
    private States _state;

    //Delegate commands for the UI
    private DelegateCommand _changeColorCommand;
    public ICommand ChangeColorCommand
    {
        get
        {
            if (_changeColorCommand == null)
            {
                _changeColorCommand = new DelegateCommand(OnChangeColor);
            }
            return _changeColorCommand;

        }
    }

    //All possible background colors
    public enum States
    {
        GREEN,
        YELLOW,
        RED
    }

    //Gets or sets the background color
    public States State
    {
        get
        {
            return _state;
        }
        set
        {
            SetProperty(ref _state, value);
        }
    }

    //Cycle through different colors
    private void OnChangeColor()
    {
        if (State == States.GREEN)
            State = States.RED;
        else if (State == States.RED)
            State = States.YELLOW;
        else if (State == States.YELLOW)
            State = States.GREEN;
    }

}

转换器：

    [ValueConversion(typeof(CameraPropertiesViewModel.States), typeof(Brush))]
public class EnumToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        CameraPropertiesViewModel.States state = (CameraPropertiesViewModel.States)value;

        switch (state)
        {
            case CameraPropertiesViewModel.States.GREEN:
                return new SolidColorBrush(Colors.Green);
            case CameraPropertiesViewModel.States.YELLOW:
                return new SolidColorBrush(Colors.Yellow);
            case CameraPropertiesViewModel.States.RED:
                return new SolidColorBrush(Colors.Red);
        }

        return new SolidColorBrush(Colors.LightGray);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}

的MainView

    <UserControl.Resources>
    <conv:EnumToColorConverter x:Key="enumToColorConvert"/>
    <cam:CameraPropertiesViewModel x:Key="CPVM" />
</UserControl.Resources>

<Grid Background="{Binding Path=State, Source={StaticResource CPVM},  Converter={StaticResource enumToColorConvert}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition  />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <cam:CamerasListView />

    <cam:CameraPropertiesView Grid.Column="1"/>

    <cam:CameraMonitorView Grid.Row="1" 
                           Grid.ColumnSpan="2" />

    <cam:CameraFunctionView Grid.Row="2" 
                            Grid.ColumnSpan="2"/>
</Grid>

资源：

<local:CameraPropertiesViewModel x:Key="CPVM" />

按钮

 <Button Style="{StaticResource circleButton}"
                    Command="{Binding ChangeColorCommand, Source={StaticResource CPVM}}"                     
                    Content="Change Theme" 
                    Width="100" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center"  
                    Grid.Column="2"
                    Grid.Row="2"/>

CameraPropertiesView.xaml

<UserControl.Resources>
    <local:CameraPropertiesViewModel x:Key="CPVM" />
    <Style TargetType="{x:Type Button}" x:Key="circleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <Viewbox>
                            <Canvas Width="50" Height="50">
                                <Ellipse Fill="{TemplateBinding Control.Background}" Width="50" Height="50"/>
                            </Canvas>
                        </Viewbox>
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Button.Content}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid>
    <GroupBox Header="Camera Details" 
              Height="130" 
              Width="386" 
              HorizontalAlignment="Right" 
              VerticalAlignment="Top"
              Margin="10">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
                <ColumnDefinition Width="120" />
            </Grid.ColumnDefinitions>

            <Label Height="25" 
                   Width="70" 
                   Content="Name" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center"
                   HorizontalContentAlignment="Right" />
            <TextBox Text="{Binding ConnectedCamera.Name}" 
                     HorizontalAlignment="Center" 
                     VerticalAlignment="Center" 
                     Height="23" 
                     Width="160"
                     Grid.Column="1"
                     IsReadOnly="True" />

            <Label Height="25" 
                   Width="70" 
                   Content="Model" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center" 
                   Grid.Row="1"
                   HorizontalContentAlignment="Right" />
            <TextBox Text="{Binding ConnectedCamera.Model}" 
                     HorizontalAlignment="Center" 
                     VerticalAlignment="Center" 
                     Height="23" 
                     Width="160"
                     IsReadOnly="True"
                     Grid.Column="1"
                     Grid.Row="1" />

            <Label Height="25" 
                   Width="70" 
                   Content="Ip Address" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center" 
                   Grid.Row="2"
                   HorizontalContentAlignment="Right" />
            <TextBox Text="{Binding ConnectedCamera.IpAddress}" 
                     HorizontalAlignment="Center" 
                     VerticalAlignment="Center" 
                     Height="23" 
                     Width="160"
                     IsReadOnly="True" 
                     Grid.Column="1"
                     Grid.Row="2" />

            <Button Command="{Binding GenerateReportCommand}"
                    Content="Generate Report" 
                    Width="100" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center"  
                    Grid.Column="2" />

            <Button Command="{Binding ArchiveReportCommand}"
                    Content="Archive Report" 
                    Width="100" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center"  
                    Grid.Column="2"
                    Grid.Row="1"/>

            <Button Style="{StaticResource circleButton}"
                    Command="{Binding ChangeColorCommand, Source={StaticResource CPVM}}"                     
                    Content="Change Theme" 
                    Width="100" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center"  
                    Grid.Column="2"
                    Grid.Row="2"/>

        </Grid>
    </GroupBox>
</Grid>

Answer 1

我能够通过剥离不重要的样式，视图模型等来重现您的问题。

您只是缺少网格绑定中的Source属性注意你如何使用按钮而不是网格。

    <Grid Background="{Binding Path=State, 
        Converter={StaticResource enumToColorConvert}}">

需要：

    <Grid Background="{Binding Path=State, 
        Converter={StaticResource enumToColorConvert}, 
        Source={StaticResource CPVM}}">

命令执行后，转换器不会被调用

1 个答案: