1

以下を検討してください XAML =>

        <fluent:Ribbon x:Name="MenuRibbon"
                       Title="title"
                       SnapsToDevicePixels="True">
        <fluent:RibbonTabItem x:Name="Home"
                                  Header="Home">
            <fluent:RibbonGroupBox Header="Project">
                <fluent:InRibbonGallery MinItemsInRow="3"
                                            MaxItemsInRow="6"
                                            Width="300"
                                            ItemWidth="64"
                                            ItemHeight="56"
                                            ItemsSource="{Binding Projects}">
                    <fluent:InRibbonGallery.ItemTemplate>
                        <DataTemplate>
                            <DockPanel>
                                <Border BorderBrush="{x:Null}"  Height="56">

                                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" DockPanel.Dock="Bottom"
                                               Text="{Binding Name}">
                                    </TextBlock>
                                </Border>
                            </DockPanel>
                        </DataTemplate>
                    </fluent:InRibbonGallery.ItemTemplate>
                </fluent:InRibbonGallery>
            </fluent:RibbonGroupBox>
        </fluent:RibbonTabItem>
    </fluent:Ribbon>

プロジェクトの ObservableColleciton を InRibbonGallery にバインドしました。また、ViewModel にプロジェクト (ActiveProject) のインスタンスが存在します。
Project オブジェクトの Name を表示するために DataTemplate で定義された TextBlock。
Active Project を含む TextBlock の色を変更するにはどうすればよいですか?
ビューモデル:

public class ViewModel : ViewModelBase
{
    private ObservableCollection<Project> _projects;

    public ViewModel()
    {
        Projects = new ObservableCollection<Project>(new List<Project>
                                                         {
                                                             new Project {Id = "0", Name = "Project1"},
                                                             new Project {Id = "1", Name = "Project2"},
                                                             new Project {Id = "2", Name = "Project3"}
                                                         });
        Project = Projects[0];
    }

    public ObservableCollection<Project> Projects
    {
        get { return _projects; }
        set
        {
            _projects = value;
            RaisePropertyChanged(() => Projects);
        }
    }

    public Project Project { get; set; }
}

public class Project : ObservableObject
{
    private string _id;
    private string _name;

    public string Name

    {
        get { return _name; }
        set
        {
            _name = value;
            RaisePropertyChanged(() => Name);
        }
    }

    public string Id
    {
        get { return _id; }
        set
        {
            _id = value;
            RaisePropertyChanged(() => Id);
        }
    }
}

プロジェクト ファイルはここにあります。

4

1 に答える 1

1

これを行うには、MultiBindingとDataTriggerを組み合わせて使用​​すると、より良い結果が得られます。

したがって、xaml は次のようになります。

<Window.Resources>
  <vm:ViewModel x:Key="ViewModel" />
  <vm:ActiveProjectCheckConverter x:Key="ActiveProjectCheckConverter" />
</Window.Resources>
...
<TextBlock HorizontalAlignment="Center"
            VerticalAlignment="Center"
            DockPanel.Dock="Bottom"
            Text="{Binding Name}">
  <TextBlock.Style>
    <Style TargetType="{x:Type TextBlock}">
      <Setter Property="Background"
              Value="Transparent" />
      <Style.Triggers>
        <DataTrigger Value="True">
          <DataTrigger.Binding>
            <MultiBinding Converter="{StaticResource ActiveProjectCheckConverter}">
              <Binding Path="Name" />
              <Binding Path="DataContext.ActiveProject.Name"
                        RelativeSource="{RelativeSource FindAncestor,
                                                        AncestorType={x:Type fluent:InRibbonGallery}}" />
            </MultiBinding>
          </DataTrigger.Binding>
          <Setter Property="Background">
            <Setter.Value>
              <LinearGradientBrush StartPoint="1,0">
                <GradientStop Offset="0.0"
                              Color="#00FFFFFF" />
                <GradientStop Offset="1.1"
                              Color="#FFFFFFFF" />
              </LinearGradientBrush>
            </Setter.Value>
          </Setter>
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </TextBlock.Style>
</TextBlock>

そしてあなたのコンバーター：

public class ActiveProjectCheckConverter : IMultiValueConverter {
  public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) {
    string first = values[0] as string;
    string second = values[1] as string;
    return !string.IsNullOrEmpty(first) && !string.IsNullOrEmpty(second) && first == second;
  }

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

ここで、ViewModel の Project オブジェクトにもう 1 つの変更を加えました。その変更を View に反映させたい場合は、INPC 自体を実装する必要があります。だから私はそれを更新し、名前も変更しましたActiveProject

private Project _activeProject;

public Project ActiveProject {
  get {
    return _activeProject;
  }
  set {
    if (value == _activeProject)
      return;
    _activeProject = value;
    RaisePropertyChanged(() => ActiveProject);
  }
}

アップデート

上記の更新は、 Dropbox-Linkで確認できます。

于 2013-04-23T21:15:40.297 に答える