We Keep Coding

C# Windiws IoT core - Display and Scroll text in Textblock over an Image Grid

Working on IoT Project using Windows IoT core. So Far Images, Videos and Audios are able to display on the Display. Need to add a scrolling Text at the bottom
The Code Developed so far XAML is:
<Page
x:Class="Digital_Notiec_Board_V1._2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Digital_Notiec_Board_V1._2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#FF222222" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="imageInstance" Visibility="Collapsed" />
<MediaElement x:Name="audioInstance" Visibility="Collapsed" />
<MediaElement x:Name="videoInstance" Visibility="Collapsed" />
<TextBlock x:Name="ScrollText" HorizontalAlignment="Left" Height="63" Margin="0,1017,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="1910" FontSize="36" Foreground="White"/>
<!--
<WebView x:Name="webViewInstance" Visibility="Collapsed"/>
-->
</Grid>
Please help me out with suggestion. If possible any Base to check On.
Thanks in advance

You can use ScrollViewer to represent the text area.Please refer to following XAML codes.To make your app responsive and adaptive,it is a good choice to use XAML properties and layout panels.Please reference Define page layouts with XAML.
<Page
x:Class="Digital_Notiec_Board.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Digital_Notiec_Board"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#FF222222" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="200"></RowDefinition>
<RowDefinition MaxHeight="200"></RowDefinition>
<RowDefinition MaxHeight="200"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="imageInstance" Visibility="Collapsed" Grid.Row="0"/>
<MediaElement x:Name="audioInstance" Visibility="Collapsed" Grid.Row="1"/>
<MediaElement x:Name="videoInstance" Visibility="Collapsed" Grid.Row="2"/>
<ScrollViewer Grid.Row="3">
<TextBlock x:Name="ScrollText" TextWrapping="Wrap" Foreground="White" Text="TextBlock" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Auto">
</TextBlock>
</ScrollViewer>
</Grid>

WPF XAML: Fill Rectangle with color blue and within an image and text in center X,Y

I have rectangle below which mission is to overlay above all other controls in the grid:
<Grid>
<Rectangle x:Name="TopPanel" Grid.ZIndex="3" Opacity="0.5">
<Rectangle.Fill>
<ImageBrush ImageSource="./Resources/Loader_128x128.gif" AlignmentX="Center" AlignmentY="Center" Stretch="None" />
</Rectangle.Fill>
</Rectangle>
<!-- Controls -->
</Grid>
I would like this rectangle to have in its center (X,Y) an image and under the image (also centered in horizontal) a text saying "Loading..." The image I have put is an animated gif.
How can I do this? I am only interested in XAML, not c# code.
Another problem I have is that my gif is not being animated. Why? In order to make gif animation work, I do not want to use extra packages.

Am not sure you can place animated gif inside ImageBrush(you will see the image but not the animation), if you dont want Code or external packages(i recommend you use external packages) you need to use MediaElement.
I removed the rectangle because i didn't understand why you need it from your description.
<Window x:Class="wpftest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:wpftest"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Border Opacity="0.5" Grid.ZIndex="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<MediaElement Height="300" Width="300"
Source="c:\us\Resources\loader.gif"
LoadedBehavior="Play"
Stretch="Uniform" SpeedRatio="1" IsMuted="False" />
<TextBlock Grid.Row="1" Text="Loading..." HorizontalAlignment="Center"/>
</Grid>
</Border>
<!-- Controls -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox/>
<Label Grid.Row="1" Content="Some Label"></Label>
<TextBox Grid.Row="2"/>
</Grid>
</Grid>

About the animated gif's:
AFAIK it is not supported directly, you'll need a library.I use a library called WpfAnimatedGif. You'll find it on nuget https://www.nuget.org/packages/WpfAnimatedGif/
After installing it, something like :
<Image gif:ImageBehavior.AnimatedSource="./Resources/Loader_128x128.gif"/>
sould do the job.

kojan is right the problem with the gif it will animate only once so you can use also animation storyboard... (you can put the loading spinner container after the controls and don't use zindex)
<Window x:Class="wpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid>
<UniformGrid Columns="1">
<Button Content="Don't" Background="Blue"/>
<Button Content="DownGrade Me" Background="White"/>
<Button Content="Please" Background="Blue"/>
</UniformGrid>
</Grid>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<MediaElement Name="MySimpsons" Source="C:\Users\CodeValueUser\documents\visual studio 2015\Projects\wpf\wpf\homer-simpson-animated-gif-4.gif" Stretch="UniformToFill" LoadedBehavior="Play" />
<TextBlock x:Name="CollapsedGif" Grid.Row="1" Text="You'll Downgrade Me i'll downgrade you!!!...." Background="Red" HorizontalAlignment="Stretch"/>
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</Grid>
</Window>
enter image description here

UserControl's image not show on MainPage

I create a UserControl that contains a static image and I want to display it on my MainPage. However, the image only displays on my UserControl without displaying on MainPage.
This is my UserControl XAML:
<UserControl
x:Class="Example.Views.UserControls.Gift.GiftView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example.Views.UserControls.Gift"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="RootLayout">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="90"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="#dedede">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" HorizontalAlignment="Stretch">
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/Icon/unselect_gift.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Gift"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="1" HorizontalAlignment="Stretch" >
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/birthday.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="BirthDay"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="2" HorizontalAlignment="Stretch">
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/package.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Package"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</StackPanel>
</Border>
</Grid>
</UserControl>
And this is my MainPage XAML:
<Page
x:Class="Example.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example"
xmlns:menu="using:Example.Views.UserControls.Menu"
xmlns:popup="using:Example.Views.UserControls.Popup"
xmlns:giftview="using:Example.Views.UserControls.Gift"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="Root">
<Grid Background="#FFCFD4E2">
<Grid Visibility="Visible">
<giftview:GiftView x:Name="GiftViewTest" DataContext="{Binding GiftViewModel}"/>
</Grid>
</Grid>
</Grid>
</Page>
When I try to clear my project, the image will shows correctly on my MainPage Preview. But when I rebuild my project, it will disappears on my preview again.
How can I do this?

Almost certainly your image cannot be found at runtime.
You'll need to check your project outputs to make sure the assets are in the correct folder.
More than likely you should use resources to access the images: see this other stackoverflow question
Example User Control that works as expected:
<UserControl x:Class="WpfApp1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<StackPanel Orientation="Vertical">
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Image Height="20" Width="40" Source="http://lorempixel.com/400/200/" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Image Height="20" Width="40" Source="sample-image.jpg" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</UserControl>
Project:

Usercontrol background color not changes even after setting to transperent in wpf

Hi i have designed a usercontrol for using as an pop up and i have set the usercontrol background property as transperent but the background is not getting transperent
I need that light orange to be transparent
and here is my xaml code of user control
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WPFTest.UCToolTip"
mc:Ignorable="d" Height="231.493" Width="362.075"
Background="Transparent" >
<UserControl.Resources>
<Style TargetType="{x:Type Hyperlink}">
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
</Style>
</UserControl.Resources>
<Grid Margin="10,0,0,0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Background="Orange" Margin="0,0,0,33">
<!--Your content here-->
</Grid>
<Polygon
Points="0,0 15,0, 0,30" Stroke="Orange" Fill="Orange" Margin="0,198,0,1" />
</Grid>

The problem seems to be that you're using the Grid incorrectly. You need to specify which row the items are in, and once you do that, you don't need all those margins. And your first row needs to have Height="Auto" so it expands to fit the content within it.
<Grid>
<Grid Margin="10,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Orange" Margin="0,0,0,0" >
<Label>My Content</Label>
</Grid>
<Polygon
Grid.Row="1"
Points="0,0 15,0, 0,30"
Stroke="Orange"
Fill="Orange"
Margin="0,0,0,1" />
</Grid>
</Grid>

TextBlock not Wrapping Silverlight application

I have a TextBlock that is not wrapping and thinks it has an infinite width. I have tried to bind it to the actualWidth of the Grid and/or UserControl, but both widths come as more than 8000. I have tried disabling the HorizontalScrollBarVisibility in the parent view, but that does not work either. I have also read all question in SO that are related to mine and none of the suggestions seems to work.
<UserControl x:Class="Civica.UI.CurrentUserMenu.Views.ClassName"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="1200">
<UserControl.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="SeparatorBrush" Color="#66848484" />
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<ScrollViewer x:Name="Viewer" BorderThickness="0" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" Padding="0"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid Background="White" HorizontalAlignment="Left" x:Name="UserControl">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="0,0,0,1" BorderBrush="{StaticResource SeparatorBrush}" Grid.Row="0">
<TextBlock Text="Text" Margin="0" FontWeight="Black" />
</Border>
<TextBlock Margin="5" Text="{Binding TextProperty}" TextWrapping="Wrap" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Grid>
</UserControl>
EDIT:
This is the code for the parent view:
<UserControl x:Class="Civica.UI.Ribbon.Views.ViewName"
d:DataContext="{d:DesignInstance Type=ViewMOdelName}"
d:DesignHeight="120"
d:DesignWidth="600"
mc:Ignorable="d">
<Grid ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<telerik:RadRibbonView x:Name="RadRibbon"
Title="Title"
ApplicationButtonContent="Content"
ApplicationMenu="{Binding PropertyName}"
ApplicationName="{Binding PropertyName}"
MinimizeButtonVisibility="Visible"
SelectionChanged="SelectionChanged" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
</Grid>
</UserControl>
It is the RadRibbonView that contains the first view.

The issue was a style that was being applied by the parent view and specifically a Telerik object. The solution was to find that style, decompile it and copy is to one of our files and change a scrollviewer to a border.