I am wondering how to show video title on top part of the screen with media transport controls. I'm using MediaPlayerElement in UWP, target version 14393.
MediaTransportControls do not provide a Title property to show video title. However, we can implement this easily as refer to Create custom transport controls.
Since we want to add a function to the control, we need to create a new class that derives from MediaTransportControls. For a detailed tutorial, please see Create a derived control under Customize the transport controls. And for a complete sample, please refer to Media Transport Controls sample.
Here, as you want the title shows on top part of the screen and only shows when
media transport control pops up, you can add the TextBlock under the Border named "ControlPanel_ControlPanelVisibilityStates_Border" and set its VerticalAlignment to Top like the following:
<Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">
<Grid>
<TextBlock VerticalAlignment="Top" Foreground="Red" FontSize="36" Text="{TemplateBinding Title}" />
<Grid x:Name="ControlPanelGrid" ...>
</Grid>
</Border>
And in the code-behind, you can implement a dependency property for the setting of the title.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
// Using a DependencyProperty as the backing store for Title. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(CustomMediaTransportControls), new PropertyMetadata(null));
public CustomMediaTransportControls()
{
this.DefaultStyleKey = typeof(CustomMediaTransportControls);
}
...
}
After this, you should be able to use your custom transport controls like:
<MediaPlayerElement Name="MainMPE" AreTransportControlsEnabled="True" Source="video.mp4">
<MediaPlayerElement.TransportControls>
<local:CustomMediaTransportControls x:Name="customMTC"
Title="This is a title">
</local:CustomMediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
Related
I created a class that inherits from Window and has got a DependencyProperty called TitlebarContent.
public FrameworkElement TitleBarContent
{
get { return (FrameworkElement)GetValue(TitleBarContentProperty); }
set { SetValue(TitleBarContentProperty, value); }
}
// Using a DependencyProperty as the backing store for TitleBarContent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TitleBarContentProperty =
DependencyProperty.Register("TitleBarContent", typeof(FrameworkElement), typeof(tkWindowControl), new PropertyMetadata(default(FrameworkElement)));
Inside a ResourceDictionary for Styles i add a ContentControlfor this property.
Now I'd like to use the new 'WindowObject' in another application and access the new TitlebarContentProperty. I can see the items inside my Titlebar and I'm able to move the Window, resize it and more. But I cannot bind to these items. For example I'd like to add a Helpbutton inside the Titlebar. The Button is shown, but i can't click it.
<tk:tkWindowControl.TitleBarContent>
<DockPanel Grid.Row="0" FlowDirection="LeftToRight">
<Button Content="Exit" Command="{Binding ExitApplicationCommand}" Height="60" Width="60" Background="Red"/>
</DockPanel>
</tk:tkWindowControl.TitleBarContent>
My DependencyProperty is a typeof(FrameWorkElement) because i like to add several Buttons to the Titlebar.
Is it possible to use my Bindings in this way?
Set the WindowChrome.IsHitTestVisibleInChrome attached property of the Button or the parent element to true:
<Button Content="Exit" WindowChrome.IsHitTestVisibleInChrome="True" ... />
Alternatively, you should decrease the value of the CaptionHeight property of the WindowChrome.
I am developing UWP app and I created new user control and I want to bind it to dependency property in the control's code behind (without the datacontext).
Code Behind:
public Brush Fill
{
get { return (Brush)GetValue(FillProperty); }
set { SetValue(FillProperty, value); }
}
// Using a DependencyProperty as the backing store for Fill. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FillProperty =
DependencyProperty.Register("Fill", typeof(Brush), typeof(MyControl), new PropertyMetadata(new SolidColorBrush(Colors.Black)));
XAML:
...
<Grid>
<Path Fill="{Binding ????}" Stretch="Fill">
...
</Path>
</Grid>
I want that my path's fill property will bind to the property Fill from code behind (the data context should hold different data so I can't use it here)
How can I do that in UWP?
x:Bind would work perfectly on this. Note x:Bind will be looking for properties, methods & events defined in your XAML's code-behind. It's a more performant binding than ElementName.
<Path Fill="{x:Bind Fill, Mode=OneWay}" />
You should be able to use the ElementName property of a binding to circumvent the data context, just as normal WPF allows you to do.
If the property is part of the user control you'll need to assign a name via x:Name to your user control in xaml to access it
<UserControl [...] x:Name="Control"...`
Then use something like{Binding ElementName=Control, Path=Fill}, as long as Fill is a property of your user control.
I'm developing a Windows Phone 8 application with an User Control.
This user control has a border, and I want to create a DependencyProperty to access this border:
public partial class CustomOptionButton : UserControl
{
public Border OuterBorder
{
get
{
return (Border)GetValue(OuterBorderProperty);
}
set
{
SetValue(OuterBorderProperty, value);
}
}
public readonly DependencyProperty OuterBorderProperty =
DependencyProperty.Register("OuterBorder", typeof(Border), typeof(CustomOptionButton), null);
But I don't know how I can bind this property in XAML.
When I have bind a TextBlock.Text, I did this on XAML:
<TextBlock x:Name="CustomText" Text="{Binding ButtonText, ElementName=userControl}" />
But, How can I do the same with the entire Border?
<Border x:Name="OutBorder" BorderBrush="White" BorderThickness="2" Margin="0">
I will need to change the BorderBrush and the BorderThickness (and maybe another properties), so I have thought that I could have only one property instead of three or four.
In this case, you need to create for each type of separate property, because to use one property Border need to create a separate Control like this:
public сlass MyBorderControl : Border
{
// Your implementation of Control
}
If you want to create a property that could be used for any Control, in WPF has attached properties:
MSDN: Attached properties overview
and used like this:
<Canvas>
<Button Canvas.Left="50">Hello</Button>
</Canvas>
In this case, Canvas.Left attached property used for the Button class.
I'm trying to have a user control where an image is passed in from its containing element. The purpose is so that I can reuse a common set of visual elements while only changing the image. For example:
The control usage:
<DataTemplate DataType={x:Type myType}>
<local:MyControl PlotIconSource="..\Images\Scatter.png"/>
</DataTemplate>
The Image inside the control
<UserControl x:Class="MyControl">
<Image Source="{Binding PlotIconSource}"/>
</UserControl>
Finally the dependency property for PlotIconSource in the code-behind for MyControl.xaml.cs.
public ImageSource PlotIconSource
{
get { return (ImageSource)GetValue(PlotIconSourceProperty); }
set { SetValue(PlotIconSourceProperty, value); }
}
public static readonly DependencyProperty PlotIconSourceProperty =
DependencyProperty.Register(
"PlotIconSource",
typeof(ImageSource),
typeof(PlotHeader),
new UIPropertyMetadata());
I'm sure I've missed something along the way so any help would be appreciated.
You might want to bind via RelativeSource or with ElementName:
<UserControl x:Class="MyControl" Name="control">
<Image Source="{Binding PlotIconSource, ElementName=control}"/>
</UserControl>
(Do not set the DataContext, it will be invisible from the outside and mess with bindings meant for an inherited DataContext)
Looks right to me, are you getting an error message or something?
I'm working on a WPF application. I have a Resource Dictionary in which I wrote custom Styles for the ToolTip and for the Button. Actually, for the button i've made two styles.
One of them, has included an image to appear to the left of the content in the buttoon.
<Style x:Key="ButtonImageStyle" TargetType="{x:Type Button}">
........
<TextBlock Margin="5.25,2.417,5.583,5.25" Foreground = White />
<Image x:Name="ButtonImage" Source="/MyProject;component/Images/icoMainMenu01.png" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-100,0,0,0" Width="16" Height="16"/>
.... </Style
Now, in the MainWindow.xaml i have the following:
<Button Style="{DynamicResource ButtonImageStyle}" x:Name="JustButton" Click="JustButton_Click" Height="50" ToolTip="Press for 1" Content="1" Margin="310,282,400,238" />
I want to be able to change that Image. I will have like 8 buttons and I want each button to have a different image associated with it.
Do you guys have any idea ?
Thanks!
There are various options, from (ab)using properties like the Tag to subclassing or composition in a UserControl, you could also create an attached property.
The cleanest would probably be subclassing though, then you can create a new dependency property for the ImageSource to be used which you then can bind in the default template using a TemplateBinding.
To do the subclassing you can use VS, from the new items choose Custom Control (WPF), this should create a class file and add a base-style to a themes resource dictionary which usually is found in Themes/Generic.xaml. The class would just look like this:
//<Usings>
namespace Test.Controls
{
public class ImageButton : Button
{
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata(null));
public ImageSource Image
{
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
}
}
Now the theme would be more complicated, you can just copy one of the default templates for a button and paste it into the the default style. Then you only need to add your image somewhere but with this binding:
<Image Source="{TemplateBinding Image}" .../>
When you use this control you will then no longer need to reference a style, as everything is in the default style, there is now a property for the image:
<controls:ImageButton Content="Lorem Ipsum"
Image="Img.png"/>
(To use the Tag you would just stick with the normal button and use a TemplateBinding to the tag and set the Tag of the buttons to the URL)
I forgot to mention another possiblity which uses dynamic resources, it's a bit verbose but very simple, see this answer of mine for an example.