I have five images, when you click one of them I want that one to get full opacity while the other only gets half, to show it is the selected one.
I am using MVVM and generally wondering if I'm doing it the right way
I was thinking about passing the name of the imagesource binded into a property.
<StackLayout Grid.Row="3" Grid.Column="1" Orientation="Horizontal" Spacing="0">
<Image Source="{Binding StatusUnresolved}" HorizontalOptions="Center"
VerticalOptions="Center" HeightRequest="40" Opacity="{Binding StatusUnresolvedOpacity}">
<Image.GestureRecognizers>
<!--<TapGestureRecognizer Command="{Binding Source={x:Reference this}, Path=OnStatusTappedCommand}" CommandParameter="{Binding StatusUnresolved}" />-->
</Image.GestureRecognizers>
</Image>
</StackLayout>
The list that turns the string into status later on.
public List<IssueStatusModel> PossibleStatusValues
{
get
{
var items = new List<IssueStatusModel>
{
new IssueStatusModel("statusUnresolved.png", IssueStatus.Unresolved),
new IssueStatusModel("statusInProgress.png", IssueStatus.InProgress),
new IssueStatusModel("statusDone.png", IssueStatus.Done)
};
return items;
}
}
Property for opacity
public double StatusDoneOpacity
{
get { return statusDoneOpacity; }
set
{
if (statusDoneOpacity != value)
{
statusDoneOpacity = value;
NotifyPropertyChanged(nameof(StatusUnresolvedOpacity));
}
}
}
public string StatusDone
{
get { return "statusDone.png"; }
}
public void OnStatusTapped(string fileName)
{
foreach (IssueStatusModel item in StatusValues)
{
if (item.Name != fileName) continue;
Issue.Status = item.Status;
StatusChecker();
return;
}
}
}
Switch statement Changing all the opacities.
private void StatusChecker()
{
switch (Issue.Status)
{
case IssueStatus.Unresolved:
StatusUnresolvedOpacity = 1;
StatusInProgressOpacity = 0.5;
StatusDoneOpacity = 0.5;
StatusText = "Unresolved";
break;
case IssueStatus.InProgress:
StatusUnresolvedOpacity = 0.5;
StatusInProgressOpacity = 1;
StatusDoneOpacity = 0.5;
StatusText = "In Progress";
break;
case IssueStatus.Done:
StatusUnresolvedOpacity = 0.5;
StatusInProgressOpacity = 0.5;
statusDoneOpacity = 1;
StatusText = "Done";
break;
}
}
The way I'd attack this, if you have multiple images, create an ImageVm and encapsulate any image specific implementation details i.e. enum State and an IsSelected notification properties. Of course if you only have 1 image this becomes trivially easy and you don't need vms
Use a DataTrigger that binds to an IsSelected MVVM property to set the Opacity and state if you need to change the image source. Obviously on click you will need to set the IsSelected Property and deselect the other VMs
Example of DataTrigger for IsSelected
<Image Grid.Column="2" Stretch="None">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Opacity" Value="0.5" />
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding IsSelected}">
<Setter Property="Opacity" Value="0.5"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
Update
You CAN use triggers with enums, and you can use a tap recognizers to fire commands in your main viewmodals. also commands can take parameters as well.
It's probably better (knowing what you have described in the comments) to just make a State and Severity enum and bind to it, and set the State and Severity via a command by a gesture.
Then you could just make a Trigger for each Image to change the Opacity for each image on the various state and severity.
Related
I want to add a blur effect to my window in some cases so I wrote a custom window style.
-I wrote a custom style because I have buttons in front of the blur effect that will get visible when the blur effect is applied, but the buttons should not get blurred.
I used the following code to apply blur:
<AdornerDecorator.Effect>
<BlurEffect Radius="{Binding Path=(local:StandardWindowEventHandler.LockedOverlayVisibility),
Converter={StaticResource VisibilityToBlurConverter}}"
KernelType="Gaussian" />
</AdornerDecorator.Effect>
this worked fine but the GPU is at ~50% when I'm in my TreeView even when radius is 0.
Without blur effect it is at like 2%. Now I don't want to set the radius any more, but the whole blur effect instead.
I have tried this:
<AdornerDecorator.Triggers>
<DataTrigger Binding="{Binding Path=(local:StandardWindowEventHandler.LockedOverlayVisibility)}"
Value="Visible">
<Setter TargetName="PART_WindowAdornerDecorator"
Property="Effect">
<Setter.Value>
<BlurEffect Radius="10" />
</Setter.Value>
</Setter>
</DataTrigger>
</AdornerDecorator.Triggers>
Unfortunately Triggers shall be Event triggers. If I make the event trigger change the radius I've won nothing, is there any possibility to add the blur effect via event trigger?
Thanks in advance
I've found a solution:
<Grid x:Name="Root_Grid"
VerticalAlignment="Stretch">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click"
SourceName="Button1">
<window:SetBlurEffectAction />
</i:EventTrigger>
<i:EventTrigger EventName="Click"
SourceName="Button2">
<window:SetBlurEffectAction />
</i:EventTrigger>
</i:Interaction.Triggers>
<AdornerDecorator ClipToBounds="True"
x:Name="PART_WindowAdornerDecorator">
<ContentPresenter x:Name="PART_RootContentPresenter"
ContentTemplate="{TemplateBinding ActualWindowTemplate}"
dxr:RibbonControlHelper.IsAutoHide="{TemplateBinding RibbonAutoHideMode}"
dxr:RibbonControlHelper.DisplayShowModeSelector="{TemplateBinding DisplayShowModeSelector}" />
</AdornerDecorator>
The Root_Grid is the parent of the AdornerDecorator as you can see.
Button1 and Button2 are some grandchildren of the Root_Grid.
public class SetBlurEffectAction : TriggerAction<DependencyObject> {
protected override void Invoke(object parameter) {
var e = parameter as RoutedEventArgs;
// OriginalSource is one of the buttons
var parent = e?.OriginalSource as UIElement;
// get Grid (parent of AdornerDecorator)
while(true) {
if(parent == null) {
return;
}
var grid = parent as Grid;
if("Root_Grid".Equals(grid?.Name)) {
break;
}
parent = VisualTreeHelper.GetParent(parent) as UIElement;
}
// apply blur to this AdornerDecorator
var deco = ((Grid)parent).GetElementByName("PART_WindowAdornerDecorator") as AdornerDecorator;
if(deco == null) {
return;
}
// != collapsed because the property is not updated yet
if(StandardWindowEventHandler.LockedOverlayVisibility != Visibility.Collapsed) {
deco.Effect = null;
} else {
deco.Effect = new BlurEffect {
KernelType = KernelType.Gaussian,
Radius = 7
};
}
}
}
StandardWindowEventHandler.LockedOverlayVisibility is a static Property that gets updated when one of the buttons is pressed.
I have a DevExpress Grid Control. I want to enable/disable a button based on the selected rows in the grid control, i.e., if any rows are selected in the grid control then this button should be enabled. Following is my GridControl code:
<dxg:GridControl x:Name="gridFloorplans" Grid.Column="1" Grid.Row="1" AutoGenerateColumns="None"
ItemsSource="{Binding FloorplanList.Result.View}"
SelectedItems="{Binding SelectedFloorplan,Mode=TwoWay}"
dx:ThemeManager.Theme="Default" SelectionMode="Row">
<dxg:GridControl.View>
<dxg:TableView AllowGrouping="False" ShowGroupPanel="False" AllowEditing="False" ShowDataNavigator="True" DataNavigatorButtons="Navigation" />
</dxg:GridControl.View>
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="Name" Header="Floorplan Name" Fixed="Left" />
<dxg:GridColumn FieldName="Season" Fixed="Left" />
<dxg:GridColumn FieldName="Version" Fixed="Left" />
</dxg:GridControl.Columns>
</dxg:GridControl>
Following is my ViewModel code:
private ObservableCollection<FloorplanData> _selectedFloorplan;
public FloorplanSearchViewModel(IErrorHandlerService inErrorHandler, INavigationService inNavigationService,
ISpaDataAdapter inDataAdapter, IAuthorizationService inAuthService)
{
// Set the commands
this.ShowStoreSetCommand = new DelegateCommand<IList<object>>(this.ShowStoreSet, this.CanShowStoreSet);
this.SearchFloorplansCommand = new DelegateCommand(this.SearchFloorplans);
this.ShowStatusChangeCommand = new DelegateCommand<IList<object>>(this.ShowStatusChange, this.CanShowStatusChange);
// Set up the default values for the search
this.StatusList = new List<object>();
this.StatusList.Add(Enum.GetName(typeof(FloorplanData.FloorplanStatus), FloorplanData.FloorplanStatus.Pending));
this.StatusList.Add(Enum.GetName(typeof(FloorplanData.FloorplanStatus), FloorplanData.FloorplanStatus.Review));
//Initiate the SelectedFloorplan property
//SelectedFloorplan = new ObservableCollection<FloorplanData>();
}
public ObservableCollection<FloorplanData> SelectedFloorplan
{
get
{
return _selectedFloorplan;
}
set
{
_selectedFloorplan = value;
this.ShowStatusChangeCommand.RaiseCanExecuteChanged();
}
}
public NotifyTaskCompletion<CollectionViewSource> FloorplanList
{
get;
private set;
}
private void ShowStatusChange(IList<object> inFloorplans)
{
try
{
// Create the navigation output
NavigationParameters args = new NavigationParameters();
args.Add(FloorplanStatusChangeViewModel.PARAM_FLOORPLAN_ID_LIST, GetFloorplanIdList(inFloorplans));
_navigationService.NavigateTo<Views.FloorplanStatusChangeView>(args);
}
catch (Exception ex)
{
_errorHandler.HandleError(ex);
}
}
private bool CanShowStatusChange(IList<object> inFloorplans)
{
// Check security to see if the current user is allowed to enter the status change screen
if (_authService.GetAccessLevel(1470) > AuthorizationLevel.None)
{
if (SelectedFloorplan!=null)
return true;
else
return false;
}
else
{
return false;
}
}
Following is the xaml code for the button:
<Button Margin="4,2" Content="Status Change" Command="{Binding ShowStatusChangeCommand}"
CommandParameter="{Binding SelectedItems, ElementName=gridFloorplans}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="ToolTip" Value="Open the Floorplan Status Change view for the selected floorplans" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="ToolTip" Value="You do not have access to open the Floorplan Status Change view" />
</Trigger>
<DataTrigger
Binding ="{Binding ElementName=gridFloorplans, Path=SelectedFloorplan}"
Value="-1">
<Setter Property="Button.IsEnabled" Value="false"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
How can I enable/disable ShowStatus button based on whether any row is selected in the grid or not?
//You are not using `inFloorplans` parameter within your method body
//Need not pass this parameter
private bool CanShowStatusChange(IList<object> inFloorplans)
Same as CanShowStatusChange method create a property and bind it to the Button which you want to enable/disable
public bool CanShowStatusChange
{
get
{
if (_authService.GetAccessLevel(1470) > AuthorizationLevel.None)
{
if (SelectedFloorplan!=null)
return true;
else
return false;
}
else
{
return false;
}
}
}
Selected floor plan cant be an observable collection. The name detotes its a It denotes a single object. So
private FloorplanData _selectedFloorplan;
public FloorplanData SelectedFloorplan
{
get
{
return _selectedFloorplan;
}
set
{
_selectedFloorplan = value;
NotifyPropertyChanged("SelectedFloorplan");
//or its equivalent method to notify the change
NotifyPropertyChanged("CanShowStatusChange");
//or its equivalent method to notify the change of CanShowStatusChange.
}
}
Make sure you bind SelectedFloorplan property and CanShowStatusChange property in your UI so that they are updated.
1) IsEnabled will get bool value from CanShowStatusChange, so you dont need style.
2) You have grid`s selected items in VM, so why pass it via parameter?
<Button Margin="4,2" Content="Status Change" Command="{Binding ShowStatusChangeCommand}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="ToolTip" Value="Open the Floorplan Status Change view for the selected floorplans" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="ToolTip" Value="You do not have access to open the Floorplan Status Change view" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
3) You set SelectedFloorplan ones, then you just change items in collection! It means than we should subscribe on CollectionChanged
public FloorplanSearchViewModel(IErrorHandlerService inErrorHandler, INavigationService inNavigationService,
ISpaDataAdapter inDataAdapter, IAuthorizationService inAuthService)
{
// Set the commands
this.ShowStoreSetCommand = new DelegateCommand<IList<object>>(this.ShowStoreSet, this.CanShowStoreSet);
this.SearchFloorplansCommand = new DelegateCommand(this.SearchFloorplans);
this.ShowStatusChangeCommand = new DelegateCommand<IList<object>>(this.ShowStatusChange, this.CanShowStatusChange);
// Set up the default values for the search
this.StatusList = new List<object>();
this.StatusList.Add(Enum.GetName(typeof(FloorplanData.FloorplanStatus), FloorplanData.FloorplanStatus.Pending));
this.StatusList.Add(Enum.GetName(typeof(FloorplanData.FloorplanStatus), FloorplanData.FloorplanStatus.Review));
//Initiate the SelectedFloorplan property
SelectedFloorplan = new ObservableCollection<FloorplanData>();
SelectedFloorplan.CollectionChanged += SelectedFloorplanOnCollectionChanged;
}
private void SelectedFloorplanOnCollectionChanged(object sender, NotifyCollectionChangedEventArgs notifyCollectionChangedEventArgs)
{
this.ShowStatusChangeCommand.RaiseCanExecuteChanged();
}
public ObservableCollection<FloorplanData> SelectedFloorplan
{
get
{
return _selectedFloorplan;
}
set
{
_selectedFloorplan = value;
this.ShowStatusChangeCommand.RaiseCanExecuteChanged();
}
}
4) And
private bool CanShowStatusChange()
{
// Check security to see if the current user is allowed to enter the status change screen
if (_authService.GetAccessLevel(1470) > AuthorizationLevel.None)
{
if (SelectedFloorplan!=null && SelectedFloorplan.Any())
return true;
else
return false;
}
else
{
return false;
}
}
I'm attempting to catch errors using IDataErrorInfo, but changes in the bound data are not firing IdataErrorInfo.this[]. I believe it's due to the way I'm binding data to the textbox.
My textbox Text is bound to a source as follows:
<TextBox Grid.Row="0" Grid.Column="1" Margin="8 0 0 0"
Text="{Binding LimitsConfiguration.ThisItemMax, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True}"
Style="{StaticResource ValidatableTextBoxStyle}"
HorizontalAlignment="Left" Width="40" Height="25" VerticalAlignment="Bottom" />
The StaticResource is defined by:
<Style x:Key="ValidatableTextBoxStyle" TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
The source is defined as follows. Note that his object is not created in the same namespace and has about 9 different string members defined in it.
public LimitsConfig LimitsConfiguration
{
get { return _limitsConfiguration; }
set
{
_limitsConfiguration = value;
OnPropertyChanged("LimitsConfiguration");
}
}
And my IDataErrorInfo.this[] implementation is as follows:
string IDataErrorInfo.this[string propertyName]
{
get
{
string result = String.Empty;
string limitsErrorMsg = "Enter a numeric value for ";
int i;
if (propertyName == "LimitsConfiguration")
{
if (propertyName == LimitsConfiguration.ThisItemMax.ToString())
{
string msg = limitsErrorMsg + "Max Itmes";
string field = LimitsConfiguration.ThisItemMax.ToString();
result = ValidateLimit(field, msg);
}
}
return result;
}
}
The implementation of IDataInfo.this[string propertyName] is never hit. However, the IDataErrorInfo implementation works when textbox text is bound to a string type. Therefore, I believe the issue is due to the binding of a member of the source (Binding LimitsConfiguration.WaypointsMax), but I'm not sure how to get around it other than create public memebers for all items in the LimitsConfiguraton object (which I'd rather not do).
I am new to WPF, so any ideas would be appreciated.
The text box does not listen for property changed events on the class that contains the LimitsConfiguration property. Instead it listens on the property changed events of the LimitsConfig class, because this is the class that contains the property that is bound to the text box.
I've got following code:
private Dictionary<int, UserControl> tabControls = new Dictionary<int, UserControl>();
public MainWindow()
{
InitializeComponent();
tabControls[0] = new Panel1();
tabControls[1] = new Panel2();
tabControls[2] = new Panel3();
tabControls[3] = new Panel4();
tabControls[4] = new Panel5();
tabControls[5] = new Panel6();
tabControls[6] = new Panel7();
tabControls[7] = new Panel8();
}
public object SelectedTab
{
//this is assigned from xaml binding
set
{
OnCurrentTabChanged(tabControl.SelectedIndex);
}
}
void OnCurrentTabChanged(int tabIndex)
{
if (dataDisplay != null)
{
dataDisplay.Children.Clear();
dataDisplay.Children.Add(tabControls[tabIndex]);
}
}
Every time the user selects different tab, an other control appears.
Is there any way to simplify this using xaml?
I cannot put the controls themselves inside the tab control
I've done this before with another TabControl which has it's headers and frame hidden. Then I just bind the SelectedIndex to your other tab's SelectedIndex, and the two are synchronized
<!-- TabControl without the TabHeaders -->
<Style x:Key="TabControl_NoHeadersStyle" TargetType="{x:Type TabControl}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<DockPanel>
<!-- This is needed to draw TabControls with Bound items -->
<StackPanel IsItemsHost="True" Height="0" Width="0" />
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you can setup your two tab controls, each bound to different sources, and bind the SelectedIndex of one to the SelectedIndex of the other
<TabControl x:Name="MainTabControl" />
<TabControl ItemsSource="{Binding Panels}"
SelectedIndex="{Binding ElementName=MainTabControl, Path=SelectedIndex}"
Style="{StaticResource TabControl_NoHeadersStyle}" />
Another alternative is to bind the SelectedIndex to something in your code-behind, then anytime it changes, raise a PropertyChanged notification on another property that exposes the panel you want to display.
<TabControl SelectedIndex="{Binding SelectedTabIndex} />
<ContentControl Content="{Binding SelectedPanel}" />
and in the code behind
public int SelectedTabIndex
{
get { return _selectedTabIndex;}
set
{
if (_selectedTabIndex != value)
{
_selectedTabIndex = value;
RaisePropertyChanged("SelectedTabIndex");
RaisePropertyChanged("SelectedPanel");
}
}
}
public UserControl SelectedPanel
{
get { return tabControls[SelectedTabIndex]; }
}
TabItem has an IsSelected propery you could bind to that I think would simplify the syntax.
public bool TabIsSelected
{
get { return tabIsSelected; }
set
{
if (value && dataDisplay != null)
{
dataDisplay.Children.Clear();
dataDisplay.Children.Add(tabControls[tabIndex]);
}
tabIsSelected = value;
}
But I still don't get why you can't just put the control in the tabitem?
using codebehind
void OnCurrentTabChanged(int tabIndex)
{
if (dataDisplay != null)
{
UIElemnt[] pp = dataDisplay.Children.Cast<UIElement>().ToArray();
Array.ForEach(pp, x=> x.visibility = Visibility.Collapsed);
pp[tabIndex].visibility = Visibility.Visible;
}
}
The Background
The summary of what I have is a UserControl MarkdownEditor. It contains a TextBox which has display properties like FontFamily, Background etc controlled by Bindings. It gets these values from an MarkdownEditorOptions class, which contains properties for each of these values. My code looks like below
In ShellView, showing how I might set display options for the TextBox in my MarkdownEditor
<me:MarkdownEditor>
<me:MarkdownEditor.Options>
<me:MarkdownEditorOptions Background="Red" />
</me:MarkdownEditor.Options>
</me:MarkdownEditor>
In MarkdownEditor.xaml.cs, DataContext for MarkdownEditor (UserControl), the declaration for Options
public MarkdownEditorOptions Options
{
get { return (MarkdownEditorOptions)GetValue(OptionsProperty); }
set { SetValue(OptionsProperty, value); }
}
public static readonly DependencyProperty OptionsProperty =
DependencyProperty.Register("Options", typeof(MarkdownEditorOptions), typeof(MarkdownEditor), new UIPropertyMetadata(new MarkdownEditorOptions()));
In MarkdownEditor.xaml : Showing the way TextBox binds to Option values
<TextBox Grid.Row="1" x:Name="txtEditor" AcceptsReturn="True" Text="{Binding Path=Content, UpdateSourceTrigger=PropertyChanged}"
FontFamily="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MarkdownEditor}}, Path=Options.FontFamily}"
FontSize="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MarkdownEditor}}, Path=Options.FontSize}"
FontWeight="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MarkdownEditor}}, Path=Options.FontWeight}"
Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MarkdownEditor}}, Path=Options.Background, Converter={StaticResource colorToBrushConverter}}"
Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MarkdownEditor}}, Path=Options.Foreground, Converter={StaticResource colorToBrushConverter}}" />
The MarkdownEditorOptions class
// MarkdownEditorOptions
public class MarkdownEditorOptions : ObservableObject
{
protected FontFamily _fontFamily;
protected int _fontSize;
protected FontWeight _fontWeight;
protected Color _background;
protected Color _foreground;
// Constructor, for default options
public MarkdownEditorOptions()
{
_fontFamily = new FontFamily("Consolas");
_fontSize = 14;
_fontWeight = FontWeights.Bold;
_background = new Color { R = 32, G = 32, B = 32, A = 255 };
_foreground = new Color { R = 255, G = 255, B = 255, A = 255 };
}
public FontFamily FontFamily {
get { return _fontFamily; }
set {
_fontFamily = value;
RaisePropertyChanged("FontFamily");
}
}
public int FontSize
{
get { return _fontSize; }
set {
_fontSize = value;
RaisePropertyChanged("FontSize");
}
}
public FontWeight FontWeight
{
get { return _fontWeight; }
set {
_fontWeight = value;
RaisePropertyChanged("FontWeight");
}
}
public Color Background
{
get { return _background; }
set {
_background = value;
RaisePropertyChanged("Background");
}
}
public Color Foreground
{
get { return _foreground; }
set {
_foreground = value;
RaisePropertyChanged("Foreground");
}
}
}
The Problem
My TextBox in MarkdownEditor is always showing the defaults from constructor of MarkdownEditorOptions. In the simple XAML I've shown, the red background does not seem to be applied. Whats wrong?
[Update: 17 Nov: 4:25PM]
A Few Thoughts
I am thinking it has something to do with Path=Options.FontSize. Maybe this binding will track changes to Options instead of Options.FontSize?
UPDATE: 19 Nov
A few observations: If I use the control in a separate simple window
<Window ...>
<Window.Resources>
<me:MarkdownEditorOptions FontFamily="Arial" FontWeight="Normal" Background="Red" x:Key="options" />
</Window.Resources>
<Grid>
<Grid.RowDefinitions ... />
<Button Content="Options ..." Grid.Row="0" Click="Button_Click" />
<me:MarkdownEditor Grid.Row="1" Options="{StaticResource options}" x:Name="markdownEditor" />
</Grid>
</Window>
Things works fine, if I use it in a more complex setup. TabControl bound to ObservableCollection<TabViewModel>, it fails
<TabControl ... ItemsSource="{Binding TabsViewSource}" IsSynchronizedWithCurrentItem="True">
I tried with and without bindings. It seems the setters in MarkdownEditorOptions is run, as I added Debug.WriteLine() but the background etc does not update.
<DataTemplate DataType="{x:Type vm:EditorTabViewModel}">
<!--<me:MarkdownEditor Options="{Binding RelativeSource={RelativeSource AncestorType={x:Type v:ShellView}}, Path=ViewModel.Options}" />-->
<me:MarkdownEditor>
<me:MarkdownEditor.Options>
<me:MarkdownEditorOptions Background="Red" />
</me:MarkdownEditor.Options>
</me:MarkdownEditor>
</DataTemplate>
Usually this is due to incorrect Path. Unfortunately, it will not raise an exception, you can try attaching vs debugger to your application and check for any binding error in debug log
This was fixed in another question of mine here on StackOverflow: Binding Setting Property but UI not updating. Can I debug within referenced project/control?