convert a canvas to a button in WPF - c#

I designed a button in a canvas, now I want to convert it to a button, with isPressed, or MouseOver attribute...
Here is the XAML code of canvas:
<Canvas x:Name="btnBelep" HorizontalAlignment="Left" Height="69.416" VerticalAlignment="Top" Width="252" Grid.Row="1" Margin="1,1.125,0,0" d:IsLocked="True">
<Path x:Name="Rectangle_6" Data="F1M1,2C1,2 251.103,2 251.103,2 251.103,2 251.103,70 251.103,70 251.103,70 1,70 1,70 1,70 1,2 1,2z" Fill="#FFE3E3E3" Height="69.395" Width="252" Stretch="Fill"/>
<TextBlock x:Name="Beléptetés1" Foreground="#FF3F3E3E" FontSize="16" FontFamily="Arial" IsHyphenationEnabled="True" LineStackingStrategy="BlockLineHeight" Canvas.Left="73.833" LineHeight="16" TextAlignment="Left" TextWrapping="Wrap" Text="Beléptetés" Canvas.Top="25.176"/>
<Path x:Name="Plus_Sign_In_A_Circular_Outline__Attribute_as_Freepik_from_Flaticon_com" Data="F1M14.234,6.491C14.808,6.491 15.274,6.948 15.274,7.514 15.274,7.514 15.274,12.015 15.274,12.015 15.274,12.015 19.85,12.015 19.85,12.015 20.425,12.015 20.891,12.473 20.89,13.038 20.89,13.603 20.424,14.061 19.85,14.061 19.85,14.061 15.274,14.061 15.274,14.061 15.274,14.061 15.274,18.563 15.274,18.563 15.274,19.128 14.808,19.586 14.234,19.586 13.659,19.586 13.194,19.128 13.194,18.563 13.194,18.563 13.194,14.061 13.194,14.061 13.194,14.061 8.618,14.061 8.618,14.061 8.043,14.061 7.578,13.603 7.578,13.038 7.578,12.473 8.043,12.015 8.618,12.015 8.618,12.015 13.194,12.015 13.194,12.015 13.194,12.015 13.194,7.514 13.194,7.514 13.194,6.948 13.66,6.491 14.234,6.491z M14.234,3.235C8.738,3.235 4.268,7.632 4.268,13.038 4.268,18.444 8.738,22.841 14.234,22.841 19.73,22.841 24.201,18.444 24.201,13.038 24.201,7.632 19.73,3.235 14.234,3.235z M14.234,1.001C20.981,1.001 26.471,6.401 26.471,13.038 26.471,19.675 20.981,25.076 14.234,25.076 7.487,25.076 1.998,19.675 1.998,13.038 1.998,6.401 7.487,1.001 14.234,1.001z" Fill="#FFD76B93" Height="27" Canvas.Left="30.833" Canvas.Top="17.257" Width="28"/>
<Path x:Name="Shape_3_Copy2" Data="F1M1,3C1,3 1,2 1,2 1,2 251.103,2 251.103,2 251.103,2 251.103,3 251.103,3 251.103,3 1,3 1,3z" Fill="#FFC7C7C7" Height="3" Canvas.Top="66.395" Width="252" Stretch="Fill"/>
</Canvas>

Assign that Canvas as the Content property of your button:
<Button>
<Button.Content>
Awesome Canvas
</Button.Content>
</Button>
Since Content is assumed to be the tag when nothing else is present, you can also do:
<Button>
Awesome Canvas
</Button>

Wrap your Convas in a Viewbox and apply to the button. The viewbox will help convert the canvas (absolute cords) into the UI panels (relative cords)...
<Button>
<Viewbox>
<Canvas>
....
</Canvas>
</Viewbox>
</Button>

Related

Binding elements into a DataTemplate in WPF Window

I have five definitions of DataTemplate in my window, according with a CantidadLlantas property, I choose one of these to show it. Until here all works fine.
But, in each DataTemplate there are some TextBox with Text property binding to one property in my ViewModel, and this isn't working, if I show these same properties in TextBoxes out of the DataTemplates the values shown are ok, is like if the binding not is binding into the DataTemplates... Why?
One of the templates the more simple is the next:
<Window.Resources>
<DataTemplate x:Name="Llantas2Template" x:Key="Llantas2Template" DataType="ContentControl">
<Grid Name="grdLlantas">
<Border Name="borLlantas" BorderBrush="Black" BorderThickness="1" Margin="0,0,0,0" Background="DarkSeaGreen" />
<Rectangle Fill="Yellow" HorizontalAlignment="Left" Height="30" Stroke="Black" VerticalAlignment="Top" Width="5" Margin="0,16,0,0" />
<Rectangle Fill="Yellow" HorizontalAlignment="Left" Height="30" Stroke="Black" VerticalAlignment="Top" Width="5" Margin="0,130,0,0" />
<Rectangle HorizontalAlignment="Left" Height="175" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top" Width="70" Margin="20,10,10,10" />
<Line X1="230" Y1="10" X2="230" Y2="150" Stroke="Black" StrokeThickness="3" />
<Ellipse Fill="Black" Height="25" Width="10" StrokeThickness="2" Stroke="Black" Margin="180,0,0,10"/>
<TextBox Name="txtLlanta2" Margin="200,10,20,20" ToolTipService.ToolTip="Llanta trasera derecha"
Width="60" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top"
Text="{Binding Llanta2, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Name="txtLlanta1" Margin="200,150,20,10" ToolTipService.ToolTip="Llanta trasera izquierda"
Width="60" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top"
Text="{Binding Llanta1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</DataTemplate>
Then in the window I declare a ContentControl into a StackPanel the visibility of which depends of a property in my ViewModel, this works fine:
<StackPanel Name="stkLlantas" Grid.Row="2" Visibility="{Binding IsVisibilityTemplate}" >
<!--Aquí se pondrá el UserControl con el Template de Llantas que corresponde-->
<ContentControl Grid.Row="2" Name="LlantasContent"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Margin="0,10,0,10" />
</StackPanel>
the selection of the template is in behind:
#region DefineTemplate
private void DefineTemplate()
{
switch (cantidadLlantas)
{
case 2:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas2Template");
break;
case 4:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas4Template");
break;
case 6:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas6Template");
break;
case 8:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas8Template");
break;
case 10:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas10Template");
break;
default:
LlantasContent.ContentTemplate = null;
break;
}
}
#endregion
In behind I define the DataContext for my window:
UnidadLlantasVM viewModel;
int cantidadLlantas;
public wUnidadLlantas(string _IDUni, int _CantidadLlantas)
{
this.Loaded += (s, a) =>
{
cantidadLlantas = _CantidadLlantas;
viewModel = new UnidadLlantasVM();
viewModel.IDUni = _IDUni;
viewModel.CantidadLlantas = _CantidadLlantas;
this.DataContext = viewModel;
DefineTemplate();
};
InitializeComponent();
}
And in xaml:
<Window x:Class="MTTO.wUnidadLlantas"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
With test purposes, I add TextBoxes in the window, with the same properties that should be showed into the template and here works fine, anex the image:
all the data sowed in the window are properties of my ViewModel and works fine, but into the template not, the TextBoxes in the picture down should be the same that the TextBoxes pointed in red. What happen? I have a Silverlight project with the same, and there works fine...
Probably you need to bind the DataContext to the ContentControl's Content property (which to me has a little smell of a design flaw in WPF, but never mind).
<StackPanel Name="stkLlantas" Grid.Row="2" Visibility="{Binding IsVisibilityTemplate}" >
<!--Aquí se pondrá el UserControl con el Template de Llantas que corresponde-->
<ContentControl Grid.Row="2" Name="LlantasContent"
Content="{Binding}"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Margin="0,10,0,10" />
</StackPanel
By the way, consider using a ContentTemplateSelector, for the thing you do in DefineTemplate. This is the default API for template selection.
You would move your existing code and logic from Define Template to SelectTemplate.
https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.contentcontrol.contenttemplateselector?view=windowsdesktop-6.0
https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datatemplateselector.selecttemplate?view=windowsdesktop-6.0

How to add a text on video as overlay while the video is in pause state in UWP

I'am using MediElement to play videos.Now I want to add a text on video when it is in pause state. How is it possible?
<MediaElement Name="videoMediaElement" AreTransportControlsEnabled="True" Stretch="Fill" MediaOpened="videoMediaElement_MediaOpened" CurrentStateChanged="Media_State_Changed" >
<MediaElement.TransportControls>
<MediaTransportControls Background="Red" Foreground="White" IsStopButtonVisible="True" IsStopEnabled="True" IsTextScaleFactorEnabled="True" IsPlaybackRateEnabled="True" IsPlaybackRateButtonVisible="True" IsFastForwardButtonVisible="True" IsFastForwardEnabled="True" IsFastRewindButtonVisible="True" IsFastRewindEnabled="True" />
</MediaElement.TransportControls>
</MediaElement>
private async void Media_State_Changed(object sender, RoutedEventArgs args)
{
if (videoMediaElement.CurrentState == MediaElementState.Paused)
{
//write a text here
}
}
Just try this:
<Grid>
<MediaElement Name="videoMediaElement" AreTransportControlsEnabled="True" Stretch="Fill" MediaOpened="videoMediaElement_MediaOpened" CurrentStateChanged="Media_State_Changed" >
<MediaElement.TransportControls>
<MediaTransportControls Background="Red" Foreground="White" IsStopButtonVisible="True" IsStopEnabled="True" IsTextScaleFactorEnabled="True" IsPlaybackRateEnabled="True" IsPlaybackRateButtonVisible="True" IsFastForwardButtonVisible="True" IsFastForwardEnabled="True" IsFastRewindButtonVisible="True" IsFastRewindEnabled="True" />
</MediaElement.TransportControls>
</MediaElement>
<TextBlock Text="asdf" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
You may also change parent Grid to Canvas and set Canvas.Top/Canvas.Left to TextBlock. Or just use Margin.

WPF Marquee Text Animation in restriced space

I can scroll text with [DoubleAnimation] but
I'd like to show as follows:
1.I have big Grid and small Canvas
2.Text is appeared in canvas right edge
3.Test is disappeared in canvas left edge
4.I like to show text in only canvas. not grid
how to make this in C#?
this is image link
http://i.stack.imgur.com/Hmhho.jpg
1. C# code
private void animation()
{
Storyboard sb = new Storyboard();
DoubleAnimation moveLeft = new DoubleAnimation();
moveLeft.From = Canvas.Width;
moveLeft.To = -tbxText.Width;
moveLeft.Duration = new Duration(TimeSpan.FromSeconds(3));
moveLeft.RepeatBehavior = RepeatBehavior.Forever;
Storyboard.SetTarget(moveLeft, tbxText);
Storyboard.SetTargetProperty(moveLeft, new PropertyPath(Canvas.LeftProperty));
moveLeft.EasingFunction = new CircleEase() { EasingMode = System.Windows.Media.Animation.EasingMode.EaseOut };
sb.Children.Add(moveLeft);
sb.Begin();
}
2. xaml Code
<Grid HorizontalAlignment="Left" Height="59" Margin="42,33,0,0" VerticalAlignment="Top" Width="255" Background="#FFC9F594">
<Canvas x:Name="Canvas" HorizontalAlignment="Left" Height="59" VerticalAlignment="Top" Width="255">
<TextBox x:Name="tbxText" Height="34" Canvas.Left="10" TextWrapping="Wrap" Text="Test Test Test Test" Canvas.Top="6" Width="196" Background="{x:Null}" BorderBrush="{x:Null}" FontSize="20"/>
</Canvas>
</Grid>
it is good way
Panel.ZIndex="1"
<Grid Panel.ZIndex="1" HorizontalAlignment="Left" Height="55" Margin="114,83,0,0" VerticalAlignment="Top" Width="266">
<Canvas x:Name="Canvas" HorizontalAlignment="Left" Height="59" VerticalAlignment="Top" Width="255" Margin="1,0,0,-4">
<TextBox x:Name="tbxText" Height="34" Canvas.Left="10" TextWrapping="Wrap" Text="Test Test Test Test" Canvas.Top="6" Width="196" Background="{x:Null}" BorderBrush="{x:Null}" FontSize="20"/>
</Canvas>
</Grid>

Image as pushpin on maps - Windows phone 8

im trying to add a image to a windows phone 8 map, to serve as a pushpin
i have the following code on my XAML
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
x:Class="Cartuxa.Contactos"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="/Assets/Images/bkContacts#2x.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28"/>
<Grid x:Name="ContentPanel" Grid.RowSpan="2" Margin="0,-6,0,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="127*"/>
<ColumnDefinition Width="329*"/>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" Margin="18.75,57.5,0,0" VerticalAlignment="Top" Source="/Assets/Images/logo#2x.png" Stretch="Fill" Grid.ColumnSpan="2" Width="221" Height="72"/>
<TextBlock HorizontalAlignment="Left" Margin="30,152,0,0" TextWrapping="Wrap" Text="Contactos" VerticalAlignment="Top" Foreground="#FFCD3333" FontFamily="Helvetica" FontSize="36" Grid.ColumnSpan="2" Width="174"/>
<Button HorizontalAlignment="Right" Margin="0,201,-13,0" VerticalAlignment="Top" Width="255" Background="White" Height="66" BorderThickness="0" Grid.Column="1" BorderBrush="#FFFF0909">
<Grid Grid.ColumnSpan="2">
<Image Name="POI_Left" Source="/Assets/Images/POI_Gray#2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-180,0,0,0" Stretch="None"/>
<TextBlock HorizontalAlignment="Left"
Margin="13,6,-22,0"
TextWrapping="Wrap"
Text="Paços dos Condes de Basto"
VerticalAlignment="Top"
FontFamily="Helvetica"
Foreground="Black"
FontSize="14" Width="182"/>
</Grid>
</Button>
<maps:Map Name="contactosMaps" HorizontalAlignment="Left" Margin="0,271,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.737,-0.175" Grid.ColumnSpan="2" Height="290" Width="480"/>
<Button Name="Contactos_Btn1"
Click="Contactos_Btn1_Click"
HorizontalAlignment="Right"
Margin="-17,201,242,0"
VerticalAlignment="Top"
Width="255"
Background="White"
Height="65"
BorderThickness="0"
Grid.ColumnSpan="2">
<Grid Name="pushRed" Grid.ColumnSpan="2">
<Image x:Name="POI_Right" Source="/Assets/Images/POI_Red#2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-190,0,0,0" Stretch="None"/>
<TextBlock HorizontalAlignment="Left" Margin="14,6,-14,0" TextWrapping="Wrap" Text="Fundação Eugénio De Almeida" VerticalAlignment="Top" FontFamily="Helvetica" Foreground="Black" FontSize="14"/>
</Grid>
</Button>
<TextBlock HorizontalAlignment="Left" Margin="26,606,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
<Run FontFamily="Helvetica" Text="Fundação Eugénio de Almeida"/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="30,655,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="402" Height="85" FontFamily="Helvetica">
<Run Text="Páteo de São Miguel "/>
<LineBreak/>
<Run Text="Apartado 2001, 7001-901 Évora "/>
<LineBreak/>
<Run Text="Portugal"/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="30,745,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22" Text="Tel. (+351) 266 748 300 "/>
<TextBlock HorizontalAlignment="Left" Margin="30,773,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
<Run FontFamily="Helvetica" Text="Fax. (+ 351) 266 705 149"/>
<Run FontFamily="Helvetica"/>
<Run/>
</TextBlock>
</Grid>
</Grid>
and my .cs code is the following
public partial class Contactos : PhoneApplicationPage
{
public Contactos()
{
InitializeComponent();
Loaded +=Contactos_Loaded;
}
private void Contactos_Loaded(object sender, RoutedEventArgs e)
{
UpdateMap();
}
private void UpdateMap()
{
MapOverlay pin = new MapOverlay();
pin.Content = pushRed;
pin.GeoCoordinate = new GeoCoordinate(38.57325D, -7.90546);
pin.PositionOrigin = new Point(0, 0.5);
MapLayer pinLayer = new MapLayer();
pinLayer.Add(pin);
contactosMaps.Layers.Add(pinLayer);
contactosMaps.SetView(new GeoCoordinate(38.57325D, -7.90546), 14D);
}
private void Contactos_Btn1_Click(object sender, RoutedEventArgs e)
{
}
}
when i try to run my project, it loads the map but a few moments later i get this exception
"Additional information: Value does not fall within the expected range."
when i do the "contactosMaps.Layers.Add(pinLayer);"
can't i have that Grid with the image as a pushpin?
Use the Phone.Controls.Toolkit as described here:-
http://wp.qmatteoq.com/maps-in-windows-phone-8-and-phone-toolkit-a-winning-team-part-1/
The toolkit can be found at either of
http://phone.codeplex.com/
or
https://www.nuget.org/packages/WPtoolkit
You can then either add the image directly in your XAML as follows:-
<maps:Map Loaded="MapControl_Loaded" ZoomLevel="18" Name="MapControl">
<toolkit:MapExtensions.Children>
<toolkit:Pushpin x:Name="MyPushpin">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<StackPanel>
<Image Source="/Images/MapScreen/MapScreenCurrentLocationPin.png" Stretch="Uniform" Width="50" Height="50" HorizontalAlignment="Center"/>
</StackPanel>
</ControlTemplate>
</toolkit:Pushpin.Template>
</toolkit:Pushpin>
</toolkit:MapExtensions.Children>
</maps:Map>
or you can add it in C# as follows:-
MapOverlay overlay = new MapOverlay
{
GeoCoordinate = myMap.Center,
Content = new Ellipse
{
Fill = new SolidColorBrush(Colors.Red),
Width = 40,
Height = 40
}
};
MapLayer layer = new MapLayer();
layer.Add(overlay);
myMap.Layers.Add(layer);
You should be able to add a Grid with an image instead of an ellipse as shown above.
Let me know if this worked for you.

WPF Bool DataTrigger - Change Font Colour

I want to change the font colour of a number of items on a WPF page based on the theme selected by the user. (there is a light theme, and a dark theme)
I'm using a datatemplate to customise the content of a listbox, when the theme is Dark, I want to change all the textblock font colours to White.
My the class behind the page I'm setting 'DarkTheme' to true.
I've successfully set triggers below, however I can't figure out how to do this from a value set on the pages class.
So, how can I style the font colour of the textblocks to white if DarkTheme = true?
Code:
public partial class Media : UserControl
{
public bool DarkTheme { get; set; }
readonly DatabaseAsset _dbAssets = new DatabaseAsset();
public Media()
{
InitializeComponent();
RefreshMediaList();
DarkTheme = Global.Configuration.IsDarkModeAppliedAsTheme();
}
}
XAML:
<UserControl.Resources>
<db:MediaAsset x:Key="MediaAsset"/>
<DataTemplate x:Key="MediaAssetItemTemplate">
<ListBoxItem Height="70" Name="ListBoxItem">
<DockPanel Margin="0,0,0,0" Height="65">
<DockPanel DockPanel.Dock="Left" Name="VideoImage2" Height="65" Width="102">
<Button Name="ListBoxItemSelect" Click="ButtonBase_OnClick" Tag="{Binding Path=Id}">
<Path Name="test" Width="38" Height="30.0833" Canvas.Left="19" Canvas.Top="22.1667" Stretch="Fill" Fill="#FF000000" Data="F1 M 19,34.8333L 22.1667,34.8333L 22.1667,42.75L 19,42.75L 19,34.8333 Z M 22.9583,34.0417L 49.4791,34.0417L 49.4791,38L 50.6667,38L 57,31.6667L 57,52.25L 50.6667,45.9167L 49.4791,45.9167L 49.4791,52.25L 22.9583,52.25L 22.9583,34.0417 Z M 29.2917,22.1667C 32.3522,22.1667 34.8333,24.6478 34.8333,27.7083C 34.8333,30.7689 32.3522,33.25 29.2917,33.25C 26.2311,33.25 23.75,30.7689 23.75,27.7083C 23.75,24.6478 26.2311,22.1667 29.2917,22.1667 Z M 41.9583,22.1667C 45.0189,22.1667 47.5,24.6478 47.5,27.7083C 47.5,30.7689 45.0189,33.25 41.9583,33.25C 38.8977,33.25 36.4167,30.7689 36.4167,27.7083C 36.4167,24.6478 38.8977,22.1667 41.9583,22.1667 Z "/>
</Button>
</DockPanel>
<DockPanel Dock="Left" Name="VideoData2" HorizontalAlignment="Stretch" Height="65">
<TextBlock DockPanel.Dock="Top" Text="{Binding Path=Title}" FontWeight="Bold" FontSize="18"></TextBlock>
<TextBlock DockPanel.Dock="Top" TextTrimming="CharacterEllipsis" Text="{Binding Path=Description}" TextWrapping="NoWrap" FontSize="13" Margin="0,0,0,0"/>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<TextBlock Text="{Binding Path=VideoCatNane}" FontSize="12" FontStyle="Italic"/>
<Border Width="50"></Border>
<TextBlock Text="{Binding Path=MediaState}" FontSize="12"/>
</StackPanel>
</DockPanel>
</DockPanel>
</ListBoxItem>
</DataTemplate>
</UserControl.Resources>
That's not the right way to do theming in WPF.
But if you want a quick solution, Move the InitializeComponent() statement to the bottom of your constructor:
public Media()
{
RefreshMediaList();
DarkTheme = Global.Configuration.IsDarkModeAppliedAsTheme();
InitializeComponent(); // <-- Here
}

Categories