Develop Reference

Prism mvvm - TabControl does not display data

I'm using Prism. I have a ContextControl region, and a view associated with that region. Within the view is a TabControl. The controls are displaying data with no problem, but the controls within the TabControl are not displaying any data. I have tried setting the DataContext and ItemsSource(for the TabControl) , without success. The data to be displayed is from the SelectedSession class.
xaml
<!--session data grid-->
<Grid x:Name="SessionDataGrid"
Grid.Column="2"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl
Grid.Row="0"
Margin="0 0 0 0"
prism:RegionManager.RegionName="DataRegion"/>
</Grid>
View
<!--row 0-->
<Label x:Name="labelSessionData"
Content="Session Data"
Style="{DynamicResource LabelGeneric}"
Grid.Column="0"
Grid.Row="0"
HorizontalContentAlignment="Center"
Margin="1,2,0,0"/>
<!--row 1-->
<Label x:Name="labelSessionDataIdentifier"
Content="Identifier: "
Grid.Column="0"
Grid.Row="1"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Right"
Style="{DynamicResource LabelGeneric}"/>
<TextBox x:Name="textBoxSessionDataIdentifier"
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Left"
Style="{DynamicResource textBoxDataN}"
Text="{Binding SelectedSession.Identifier, Mode=OneWay}"
Width="230"
Margin="0 4 0 3"/>
<Label x:Name="labelSessionDataCamera"
Content="Camera: "
Grid.Column="2"
Grid.Row="1"
HorizontalAlignment="Right"
HorizontalContentAlignment="Right"
Style="{DynamicResource LabelGeneric}"/>
<ComboBox x:Name="comboboxSessionDataCamera"
Grid.Column="3"
Grid.Row="1"
FlowDirection="LeftToRight"
HorizontalAlignment="Left"
HorizontalContentAlignment="Left"
IsEditable="True"
ItemsSource="{Binding Cameras}"
DisplayMemberPath="CameraName"
SelectedValue="{Binding SelectedSession.CameraId, Mode=TwoWay}"
SelectedValuePath="CameraId"
Style="{DynamicResource ComboboxData}"
Width="230"
Margin="0 0 0 0"/>
<!--row 3-->
<TabControl x:Name="tabControlSessionData"
Grid.Column="0"
Grid.ColumnSpan="4"
Grid.Row="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,10,0"
Visibility="Hidden">
<TabItem Header="Analog">
<Grid Background="{StaticResource MainBackgroundColor}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="83"/>
<ColumnDefinition Width="8"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<!--row 0-->
<Label x:Name="labelSessionAnalogFilm"
Content="Film: "
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0"
Style="{DynamicResource LabelGeneric}"
Margin="1,1,0,0"/>
<ComboBox x:Name="comboboxSessionAnalogFilm"
Grid.Column="2"
Grid.ColumnSpan="2"
Grid.Row="0"
ItemsSource="{Binding Films}"
DisplayMemberPath="FilmName"
SelectedValue="{Binding SelectedSession.FilmId, Mode=TwoWay}"
SelectedValuePath="FilmID"
Style="{DynamicResource ComboboxData}"
Margin="0 0 0 0"/>
<Label x:Name="labelSessionAnalogISO"
Content="ISO: "
Grid.Column="4"
Grid.Row="0"
HorizontalAlignment="Right"
HorizontalContentAlignment="Right"
Style="{DynamicResource LabelGeneric}"
Margin="2,1,0,0"/>
<TextBox x:Name="textBoxSessionAnalogFilmISO"
Grid.Column="5"
Grid.Row="0"
HorizontalAlignment="Left"
Style="{DynamicResource textBoxDataN}"
Text="{Binding FilmISO, Mode=TwoWay}"
Width="50"
Margin="0,4"/>
Any help would be appreciated.

I was getting the data from a DataGrid. Once I defined the columns for the data it started working.

Implement responsive player with ScrollViewer

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.

PopUp control does not move with the Window, while moving the window after we resize it

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;
}

How to create a news feed style layout in XAML for UWP with different sized panels

I am trying to create a scrolling list of panels with each one having a different appearance. I have used the variable sized wrap grid but my images don't seem to show correctly on the smaller panels. The items in the grid view are bound to a list of unknown length.
Screenshot of the current layout
Here is the xaml code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:MyGridView ItemsSource="{Binding}" IsItemClickEnabled="True" ItemClick="Button_Click" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="190" ItemWidth="320" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate >
<DataTemplate x:DataType="data:Article">
<Grid Height="1080" Width="1440" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="{x:Bind image}" Stretch="UniformToFill" />
<StackPanel VerticalAlignment="Top">
<StackPanel.Background>
<SolidColorBrush Color="White" Opacity=".75" />
</StackPanel.Background>
<TextBlock FontSize="30" Margin="5" TextWrapping="WrapWholeWords" >
<Run Text="{x:Bind Name}"/>
</TextBlock>
<TextBlock Margin="5" FontSize="15" FontWeight="Thin" TextWrapping="Wrap" TextTrimming="WordEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="19" MaxHeight="38" >
"It is hard to miss the warnings. In the race to make computers more intelligent than us, humanity will summon a demon, bring forth the end of days, and code itself into oblivion. Instead of silicon assistants we'll build silicon assassins. The doomsday story of an evil AI has been told a thousand times. But our fate at the hand of clever cloggs robots may in fact be worse - to summon a class of eternally useless human beings."
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</local:MyGridView>
</Grid>
Ideally I want the layout shown in the xaml code below but I have two further problems:
1) I don't know how to turn this into a template so that I can bind to the list
2) The images in the inner-most grid do not layout according to the *-size proportions that I had set.
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="40*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36*"/>
<ColumnDefinition Width="648*"/>
<ColumnDefinition Width="36*"/>
</Grid.ColumnDefinitions>
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<Grid Name="grid1">
<Image Source="/Assets/obama.jpg" VerticalAlignment="Center" Stretch="UniformToFill" Margin="0 5 0 5"/>
<Rectangle Fill="Black" Opacity=".3" />
<TextBlock VerticalAlignment="Center" Text="Obama Is President" TextWrapping="WrapWholeWords" FontSize="133.333" Foreground="White" HorizontalAlignment="Center"/>
</Grid>
<Grid Name="grid2" Margin="20 0 20 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Tag="blah" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}"/>
<Button Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}"/>
<Button Grid.Row="3" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}" />
<Button Tag="g" Grid.Row="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}" />
</Grid>
<Grid Grid.Column="1" >
<Grid.RowDefinitions>
<RowDefinition Height= "*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="test" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Text_Button}"/>
<Button Content="test" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Text_Button}"/>
<Button Content="test" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Medium_Button}"/>
<Button Content="test" Grid.Row="4" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Medium_Button}"/>
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
I know my code is likely quite messy since i am new to xaml and windows development in general but I'd appreciate any solutions.
Update: It's been pointed out that I specified grid dimensions which is causing my problem with the images, removing the grid height and width results in them showing properly. To follow up, is there now a way for the images to now change size depending on the window size (stretch/squish) up to a limit before the wrap effect takes place?

TextBlock does not display all Text

I am new to this forum and new to windows phone 8 development.
I have below code
<Grid x:Name="LayoutRoot" Background="#EEF8E5" Loaded="LayoutRoot_Loaded">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<TextBlock x:Name="ApplicationTitle" FontWeight="Bold" Padding="20,0,0,0" Grid.Row="0" Text="فرآن کریم"/>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Visible"
x:Name="Scroller" VerticalContentAlignment="Top" >
<Grid x:Name="ContentPanel" Margin="20,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="txtBismullah" FontSize="40" HorizontalAlignment="Center" Grid.Row="0"></TextBlock>
<TextBlock x:Name="txt" FontSize="40" Grid.Row="1" TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Background="Silver" VerticalAlignment="Bottom">
<Button Content="1" Width="100" BorderThickness="0" VerticalAlignment="Top" Click="Button_Click"></Button>
</Grid>
</Grid>
and c#
string readData()
{
string suraIndex = string.Empty;
int counter = 1;
for (int i = 0; i < 40; i++)
suraIndex += counter++ + Environment.NewLine;
return suraIndex;
}
and finally
txt.Text += readData();
txt.Text += " I am Here";
The prob is, It does not show all the text, It shows only upto 35 (while there is a scroll because of scroller) but no text is displayed.
I dont know what is wrong with textblock and or may be its height, though it's set to Auto.

You should put the TextBlock in a ScrollViewer instead of the whole Grid
<Grid Grid.Row="1" x:Name="ContentPanel" Margin="20,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="txtBismullah" FontSize="40" HorizontalAlignment="Center" Grid.Row="0"/>
<ScrollViewer x:Name="Scroller" Grid.Row="1" VerticalScrollBarVisibility="Visible" VerticalContentAlignment="Top" >
<TextBlock x:Name="txt" FontSize="40" Grid.Row="1" TextWrapping="Wrap" />
</ScrollViewer>
</Grid>

Sorted it out by using listbox instead of textblock.