I need to realize how to do responsive MediaPlayer like this
And what i have
ScrollViewer prevents the second row from taking up space
This is my XAML code:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<MediaPlayerElement AreTransportControlsEnabled="True"
Name="player"
PosterSource="{Binding SelectedMedia.Poster, UpdateSourceTrigger=PropertyChanged}"
Source="{Binding SelectedMedia.Video_source}"
Stretch="Uniform"
HorizontalAlignment="Center"
AutoPlay="{Binding IsStreamPlay}"
RelativePanel.Above="AboutGrid">
<MediaPlayerElement.TransportControls>
<controls:CustomMediaTransportControls IsCompact="True"
IsZoomButtonVisible="False"
IsPlaybackRateButtonVisible="False"
IsVolumeEnabled="True"
IsVolumeButtonVisible="True"
IsSeekBarVisible="False"
IsPlaybackRateEnabled="False"
QualityCommand="{Binding SetQualityCommand}"
Qualities="{Binding Qualities, Mode=TwoWay}">
</controls:CustomMediaTransportControls>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
<Grid x:Name="AboutGrid"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="{Binding SelectedMedia.Atr_url}"
Width="85"
Height="113"
Grid.Row="0"
Grid.RowSpan="3"
VerticalAlignment="Top"
Margin="4"
HorizontalAlignment="Left"/>
<Grid Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="4"
Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="Left">
<TextBlock FontWeight="SemiBold"
TextWrapping="Wrap"
FontSize="17"
Text="{Binding SelectedMedia.Title}" />
<TextBlock FontWeight="SemiLight"
TextWrapping="Wrap"
Text="{Binding SelectedMedia.Description}"/>
<TextBlock FontWeight="SemiLight">
<Run FontWeight="Normal"
Text="{Binding SelectedMedia.Game_name, UpdateSourceTrigger=PropertyChanged}"/>
</TextBlock>
</Grid>
</Grid>
</Grid>
</ScrollViewer >
I think the problem is that ScrollViever does not properly resize its children, what can I do about it?
Grid's proportional self-adaptation has preconditions and needs to be calculated based on the width of the current parent container.
But for the ScrollViewer, you can think of it as an "infinite" inner space, so that the Grid's adaptation will not take effect.
If you want to achieve the effect like Twitch, you can choose to limit the height of the MediaPlayerElement, like this:
xaml
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="Black" x:Name="MediaContainer">
<MediaPlayerElement
...
HorizontalAlignment="Center"/>
</Grid>
...
</Grid>
</ScrollViewer>
xaml.cs
public VideoPage()
{
this.InitializeComponent();
this.SizeChanged += Page_SizeChanged;
}
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
double height = e.NewSize.Height;
MediaContainer.Height = height * 0.8;
}
Best regards.
Related
I am using Syncfusion's SfDataGrid instead of standard one, but this question is more about XAML, not the control itself, I think.
So, I have a window with DataGrid. If there is for example 60 records, then the window gets really tall. I want the window not to change its size at all. And really don't know why it's happening.
This is my XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Margin="10,0,10,0" Grid.Row="0" DataContext="{Binding Info}">
<TextBlock Text="Amount:"/>
<sf:CurrencyTextBox Value="{Binding Amount}" Margin="0,0,0,10"/>
<!-- some other controls -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource LeftLabel}"
Text="Count:"/>
<sf:UpDown Grid.Column="1" Grid.Row="0" Margin="0,0,0,5"
Value="{Binding Count}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Style="{StaticResource LeftLabel}"
Text="Year count:"/>
<sf:UpDown Grid.Column="1" Grid.Row="1"
Value="{Binding YearCount}"/>
</Grid>
</StackPanel>
<Button Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,10,10,5"
Content="Simulate >>"
Command="{Binding SimulateCommand}"/>
</Grid>
<!-- This is right part of the window with datagrid -->
<DockPanel Grid.Column="1">
<WrapPanel DockPanel.Dock="Top">
<TextBlock Margin="10" Text="Total amount:" />
<TextBlock Text="{Binding TotalAmount"/>
</WrapPanel>
<!-- and the datagrid -->
<sf:SfDataGrid AutoGenerateColumns="False"
AllowDeleting="False"
AllowEditing="False"
IsReadOnly="False"
AllowGrouping="False"
AllowFiltering="False"
ItemsSource="{Binding History}">
<sf:SfDataGrid.Columns>
<sf:GridDateTimeColumn DisplayBinding="{Binding Date}" MappingName="PaymentDay" HeaderText="Date"/>
<sf:GridCurrencyColumn DisplayBinding="{Binding Amount}" MappingName="PayAmount" HeaderText="Amount"/>
</sf:SfDataGrid.Columns>
</sf:SfDataGrid>
</DockPanel>
</Grid>
So what is wrong with it?
I'm unable to get the Gridsplitter to function with the following example code. The grid splitter does not move or resize the surrounding "Top" and "Buttom" grid rows which are set to fill available space:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
</Grid>
<Grid Grid.Row="1">
<GridSplitter Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
</Grid>
<Grid Grid.Row="2">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
</Grid>
Edit: As Clemens says, your GridSplitter has to be a direct child of the grid that you want to split. You are putting a new Grid into row 1 of the parent grid when you do:
<Grid Grid.Row="1">
<GridSplitter Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
</Grid>
You need to put the splitter directly into the parent grid that you want to split and declare the row in the element tag:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<TextBlock Grid.Row="0" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
Just remove the Grids that are useless:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<TextBlock FontSize="55" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
EDIT :
For clarity: the GridSplitter control resizes just elements at its same level in Grid children hierarchy. You can put whatever you want inside the grid, but you have to put the GridSplitter to the same level of the control you want to resize.
You can still do this:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
</Grid>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<Grid Grid.Row="2">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
</Grid>
But the GridSplitter has to be at the same level of the control you want to resize.
I am facing one issue with the WPF popup control.
When we resize the window and move it, PopUp control remains at same position at which it was open previously and does not move with the window.
So what is the solution for this issue.
please provide code snippet for the solution if any. Thanks :)
Xaml code for popup control is as follows:
<Popup x:Name="popNonTopMostPopup" Height="200" Width="220" AllowsTransparency="True" Placement="Right">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<fa:FontAwesome Grid.Column="0" Icon="Play" FontSize="30" HorizontalAlignment="Right" Rotation="180" VerticalAlignment="Top" Margin="0 7 -2 0" />
<Border Grid.Column="1" BorderBrush="LightGray" Background="Black" CornerRadius="5" Height="200" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="btnCustomPopup" Click="btnCustomPopup_Click" HorizontalAlignment="Right" Background="Transparent" Foreground="LightGray" BorderBrush="Transparent" Grid.Row="0">
<StackPanel Margin="0">
<fa:FontAwesome Icon="Close" VerticalAlignment="Center" />
</StackPanel>
</Button>
<Label x:Name="lblName" Grid.Row="1" Foreground="LightGray"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblDueDate" Foreground="LightGray" Content="Fristdatum: " Grid.Column="0" VerticalAlignment="Bottom" Visibility="Hidden"></Label>
<TextBlock x:Name="txtDueDate" Foreground="LightGray" HorizontalAlignment="Left" Grid.Column="1" VerticalAlignment="Center" Visibility="Hidden"></TextBlock>
</Grid>
<Separator Grid.Row="3"></Separator>
<TextBlock x:Name="txtComments" Foreground="LightGray" TextWrapping="WrapWithOverflow" Grid.Row="4" Margin="10 10 10 10"></TextBlock>
</Grid>
</Border>
</Grid>
</Popup>
We have icons on map on click of which pop up control is displayed.Code for click event is as follows.
void pin_MouseLeftButtonDownForOrder(object sender, MouseButtonEventArgs e)
{
// set the placement target of popup as pin mapicon
popNonTopMostPopup.PlacementTarget = orderIcon;
popNonTopMostPopup.IsOpen = true;
}
Is it possible to have a scrolling (multiline) TextBox without explicitly setting the height? Here is my example code snippet:
<Grid Grid.Row="6"
Grid.Column="2"
Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0">Heading</Label>
<TextBox Grid.Row="1"
SpellCheck.IsEnabled="True"
TextWrapping="Wrap"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"></TextBox>
</Grid>
The problem here is that the TextBox will resize itself depending on how many lines the user enters without resorting to instead staying the same size and scrolling.
Simply add VerticalAlignment="Top"
<Grid Grid.Row="6"
Grid.Column="2"
Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0">Heading</Label>
<TextBox
VerticalAlignment="Top"
Grid.Row="1"
SpellCheck.IsEnabled="True"
TextWrapping="Wrap"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"></TextBox>
</Grid>
This will get you started. As you have not put your requirements clearly, it's difficult to put a proper solution. If you put your more clear requirements, I can make a better version for you.
<Window ...>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="476*"/>
<ColumnDefinition Width="45*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Width="{Binding Value, ElementName=HorizontalSB}" Height="{Binding Value, ElementName=VerticalSB}" Margin="30,37,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" />
<ScrollBar x:Name="VerticalSB" Grid.Column="1" HorizontalAlignment="Center" Width="Auto" SmallChange="1" Minimum="50" Value="25" MaxHeight="250" Maximum="1000"/>
<ScrollBar x:Name="HorizontalSB" Grid.Row="1" VerticalAlignment="Top" Width="Auto" Orientation="Horizontal" VerticalContentAlignment="Center" SmallChange="10" Maximum="1000" Minimum="20" LargeChange="10" Value="75"/>
</Grid>
</Window>
I have this xaml code:
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="640*" />
<ColumnDefinition Width="14"/>
<ColumnDefinition Width="350*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Column="0" Grid.Row="2" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Visible" SelectionMode="Single" >
<ListView.ItemTemplate>
<DataTemplate>
<Border x:Name="border" BorderBrush="Black" BorderThickness="1" Margin="0,1,0,0">
<Grid Background="Transparent" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="300"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*" MinWidth="300"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="150"/>
<RowDefinition Height="4"/>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Stretch="UniformToFill" StretchDirection="Both">
<Image.Source>
</Image.Source>
</Image>
<TextBlock Grid.Column="0" Grid.Row="2" FontWeight="Black" TextAlignment="Center" >
<TextBlock.Text >
</TextBlock.Text>
</TextBlock>
<Image Grid.Column="2" Grid.Row="0" Stretch="UniformToFill" StretchDirection="Both" >
<Image.Source>
</Image.Source>
</Image>
<TextBlock Grid.Column="2" Grid.Row="2" FontWeight="Black" TextAlignment="Center" >
<TextBlock.Text >
</TextBlock.Text>
</TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
when I resize the window that this xaml is on it, I can see that image are resize to fill the width, but they are not resized to fill the height. If the image is too big for the height, the top of image is shown and not the bottom section.
How can I change this xaml that when width or height is changes, the image size in the list view also changes?
See the documentation
UniformToFill preserves aspect
I think you want Fill
Stretch Enumeration