How to full Screen popup in windows phone 8? - silverlight

Hi;
i can not fit RadModalWindow on windows phone 8 application. How to fill all screen my popup?
<telerikPrimitives:RadModalWindow Name="cardselect" IsFullScreen="True"
HorizontalAlignment="Center" VerticalAlignment="Center"
PlacementTarget="{Binding ElementName=ContentPanel}"
IsClosedOnOutsideTap="True">
<Grid Name="ModalWindowGrid1"
Width="{Binding ProgramtDetailWidth, Mode=TwoWay}"
Height="{Binding ProgramtDetailHeight, Mode=TwoWay}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Background>
<ImageBrush ImageSource="Assets/Background.png"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderBrush="#FF0A0611" BorderThickness="0" Grid.Row="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF45374D"/>
<GradientStop Color="#FF1E092A" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderThickness="3" HorizontalAlignment="Left" Width="330" Height="392" VerticalAlignment="Top">
<Border.BorderBrush>
<SolidColorBrush Color="#FFF2F1F3"/>
</Border.BorderBrush>
<StackPanel HorizontalAlignment="Center" Width="330" Margin="-3,0" >
<StackPanel x:Name="MainPanel" Height="385">
<Border BorderThickness="0,0,0,3" Height="70" VerticalAlignment="Top" Margin="0,0,1,0">
<Border.BorderBrush>
<SolidColorBrush Color="#FFF2F1F3"/>
</Border.BorderBrush>
<TextBlock HorizontalAlignment="Center" Margin="0,22,0,15" TextWrapping="Wrap" VerticalAlignment="Center" FontSize="21.333" Height="32" Width="209" Grid.RowSpan="2" Text="Dijital Kart No Seçiniz"/>
</Border>
<StackPanel x:Name="WaitingPanel" Margin="0,60" HorizontalAlignment="Center" Visibility="Collapsed">
<TextBlock Text="Kayıt işlemi sürüyor." VerticalAlignment="Center" FontSize="21.333" HorizontalAlignment="Center"/>
<ProgressBar x:Name="pgb" Width="250" IsIndeterminate="True" Margin="0,10
,0,0" Value="0" />
</StackPanel>
<Grid x:Name="grdClient" HorizontalAlignment="Left" VerticalAlignment="Top" Height="313" Width="329">
<Grid.RowDefinitions>
<RowDefinition Height="255*"/>
<RowDefinition Height="58*"/>
</Grid.RowDefinitions>
<Button x:Name="btnOK" Content="OK" HorizontalAlignment="Right" Height="46" Margin="0,0,21,0" VerticalAlignment="Center" Width="119" Click="btnRecord_Click" Grid.Row="1"/>
<Button x:Name="btnCancel" Content="Vazgeç" HorizontalAlignment="Left" Height="46" Margin="21,0,0,0" VerticalAlignment="Center" Width="119" Click="btnCancel_Click_1" Grid.Row="1"/>
<ListBox Name="lstCards" SelectionMode="Single" HorizontalAlignment="Left" Height="210" Margin="21,21,0,0" VerticalAlignment="Top" Width="287" ItemsSource="{Binding}"></ListBox>
</Grid>
</StackPanel>
</StackPanel>
</Border>
</Border>
</Grid>
</telerikPrimitives:RadModalWindow>

It looks like your window's content is not big enough to fill the screen. The RadModalWindow does fill the whole screen, but any area not covered by your content will show what is behind it via transparency.
Make your main grid auto size to fill the screen. Alternately, setting a background colour or image on your window should ensure the transparency doesn't show the content behind the window.

Related

How to autosize path to grid container in WPF

In WPF application, text is going out of its path as per screenshot.Please suggest how can we autosize it according to resolution/window size.i tried to set few property but did not help.
<Grid Grid.Row="0" >
<Popup x:Name="popLines"
PlacementTarget="{Binding ElementName=btn}"
Placement="Relative"
IsOpen="False"
Width="750"
ScrollViewer.CanContentScroll="True"
AllowsTransparency="True"
StaysOpen="False"
PopupAnimation="Scroll"
HorizontalAlignment="Left"
VerticalAlignment="Top"
HorizontalOffset="-190" VerticalOffset="0"
ToolTip="Approval Screen Help">
<Grid Margin="10">
<Path Fill="LightBlue" Stretch="Fill" Stroke="LightBlue"
StrokeThickness="3" StrokeLineJoin="Round"
Margin="0" Data="M130,154 L427.5,154 427.5,240.5 299.5,240.5 287.5,245.5 275.5,240.5 130,240.5 z">
<Path.Effect>
<DropShadowEffect BlurRadius="12" Color="Black" Direction="315" Opacity="0.8"/>
</Path.Effect>
</Path>
<Grid Margin="10,5,10,5" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Style="{StaticResource XBtn}" Click="btn1_Click" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<TextBlock Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Text="{Binding ApprovalScreenHelp}">
</TextBlock>
</Grid>
</Grid>
</Popup>
</Grid>

How to make two child occupy 100% and 20% of parent grid?

I have a grid with 2 rows. and I want to place a rectangle to take 100% of grid height and a text box to be placed outside the grid(overflow).
My XAML Code:
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Height="{Binding Height, ElementName=AppServer}">
<Rectangle.Fill>
<ImageBrush ImageSource="/Images/Server_Base.png"/>
</Rectangle.Fill>
</Rectangle>
<Label ClipToBounds="False" Grid.Row="1" Width="Auto" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" Background="Transparent" >
<AccessText TextWrapping="Wrap">App</AccessText>
</Label>
</Grid>
as a simple workaround you may use below
<Grid>
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="/Images/Server_Base.png" />
</Rectangle.Fill>
</Rectangle>
<Canvas VerticalAlignment="Bottom">
<Label ClipToBounds="False"
Canvas.Right="0"
Width="Auto"
Background="Transparent">
<AccessText TextWrapping="Wrap">App</AccessText>
</Label>
</Canvas>
</Grid>

How to set margin for a single cell inside stack panel for multiple controls in WPF?

I need the textbox1 control ought to put by lable1 and textbox2 control ought to put alongside lable2. I am utilizing single cell from a Grid for this whole control allignment. i can't drag and place the controls wherever i need. is there some other conceivable approach to drag and place my controls inside a cell in grid?
Here's my XAML code..
<Grid Background="#BFBFBF">
<StackPanel Margin="2,2,2,2" >
<Grid Margin="2,2,2,2" VerticalAlignment="Top">
<Grid.RowDefinitions >
<RowDefinition Height="35*"/>
<RowDefinition Height="35*"/>
<RowDefinition Height="35*"/>
</Grid.RowDefinitions>
<!-- 1st Content-->
<Border Margin="4,2,2,2" BorderBrush="#FF0100A3" Grid.Row="0" CornerRadius="3,3,3,3" VerticalAlignment="Top" BorderThickness="2,2,2,2" Height="30" MouseLeftButtonDown="brdSectionOne_MouseLeftButtonDown">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5E68CE" Offset="0"/>
<GradientStop Color="#FF5B64CA" Offset="1"/>
<GradientStop Color="#FF000C82" Offset="0.356"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Section 1" Grid.ColumnSpan ="2" Foreground="White" Grid.Row="0" FontFamily="Segoe UI" FontSize="13" Margin="8,5,2,0" VerticalAlignment="Top" FontWeight="Normal" Cursor="Hand" />
</Border>
<StackPanel x:Name="spnlFirstSection" Grid.Row="0" VerticalAlignment="Bottom" Height="436" Margin="3,35,3,0" >
<Border Margin="1,1,1,1" CornerRadius="3,3,3,3" VerticalAlignment="Top" BorderThickness="2,2,2,2" Height="430" Background="#FFFFFFFF" BorderBrush="#FF4C4BEE" >
<StackPanel Grid.ColumnSpan ="2" Grid.Row="0" Height="445" Margin="6,6,6,0" VerticalAlignment="Top" >
<Label x:Name="lbl_1" Content="Label 1" Margin="50,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="-1.895,0" FontSize="14"/>
<TextBox x:Name="textbox1" Margin="300,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="textbox1" Height="25" TextWrapping="Wrap" Width="250" FontSize="18"/>
<Label x:Name="lbl_2" Content="Label 2" Margin="50,30,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="-1.895,0" FontSize="14"/>
<TextBox x:Name="textbox2" Margin="300,30,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="textbox2" Height="25" TextWrapping="Wrap" Width="250" FontSize="18"/>
</StackPanel>
<!--<TextBlock Text="Section 1 Content" Grid.ColumnSpan ="2" Foreground="#FF000000" Grid.Row="0" FontFamily="Segoe UI" FontSize="13" Margin="6,6,6,0" VerticalAlignment="Top" FontWeight="Normal" Cursor="Hand" Height="445" />-->
</Border>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
A StackPanel stacks either Vertically (default) or Horizontally. Like so:
<StackPanel>
<TextBlock Text="Foo"/>
<TextBlock Text="Bar"/>
</StackPanel>
Will render:
Foo
Bar
While
<StackPanel Orientation="Horizontal">
<TextBlock Text="Foo"/>
<TextBlock Text="Bar"/>
</StackPanel>
Will render:
Foo Bar
If you want something to look like a Grid you should use a Grid! So if you want something like this:
LabelOne: Foo
LabelTwo: Bar
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="LabelOne:" /> <!-- Grid.Row and Grid.Column default to 0 -->
<Label Content="LabelTwo:" Grid.Row="1" />
<TextBox Text="Foo" Grid.Column="1" />
<TextBox Text="Bar" Grid.Row="1" Grid.Column="1" />
</Grid>
You could also try and nest StackPanels like so:
<StackPanel Orientation="Horizontal">
<StackPanel>
<Label Content="LabelOne:" />
<Label Content="LabelTwo:" />
</StackPanel>
<StackPanel>
<TextBox Text="Foo" />
<TextBox Text="Bar" />
</StackPanel>
</StackPanel>
But that will problably get you some unwanted behaviours.

MediaElement layout to occupy entire space

Below is my xaml code in which I have Mediaelement and 3 button hosted inside grid.
<Grid ShowGridLines="True">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#FF4F87F7"
Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="7*" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="4"
HorizontalAlignment="Stretch"
Grid.Row="1"
BorderThickness="2"
CornerRadius="5"
BorderBrush="Black">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Width="100"
Content="Previous"
Style="{DynamicResource buttonMargin}" />
<Button Width="100"
Content="Play"
Style="{DynamicResource buttonMargin}"
Click="Button_Click" />
<Button Width="100"
Content="Next"
Style="{DynamicResource buttonMargin}" />
<ToggleButton Style="{DynamicResource toggleButtonMargin}">Full Screen</ToggleButton>
</StackPanel>
</Border>
<MediaElement Name="me"
HorizontalAlignment="Stretch"
LoadedBehavior="Manual"
VerticalAlignment="Top"
Grid.IsSharedSizeScope="True" />
<GridSplitter Grid.Column="1"
Width="3"
HorizontalAlignment="Center" />
<WebBrowser Name="webBrowserScript"
Grid.Column="2" />
</Grid>
Problem: My aim is to render MediaElement in 0th row and 0th column and it should occupy entire space. However, MediaElement is not streaching entirely and not occupying entire space. I tried all possible combinations of HorizontalAlignment and VerticalAlignment. Can anyone help?
Regards,
Hemant
Got it..
Need to use Stretch property of media element.
<MediaElement Name="me" HorizontalAlignment="Stretch" LoadedBehavior="Manual"
VerticalAlignment="Stretch" Stretch="Fill"/>

Silverlight ListBox Height Automatically increase

I am using silvelight listbox control,and i stucked.Every listbox item contains another listbox item now when i bind my data second listbox control,it appears horizontal scrollbar and this is not a problem i can remove it.How can do when I add new Item to second listbox,its height automatically increase?
For a second listbox Height=Auto dont work because its scrolling.
is that possible?
Thx.
Here is XAML code:
<DataTemplate x:Key="VesselListItem">
<Border Height="Auto" HorizontalAlignment="Left" Margin="0" Name="border1" VerticalAlignment="Top" Width="271" CornerRadius="7" BorderThickness="2">
<Grid Name="grid1" Width="Auto">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="6,1,0,0" Name="textBlock1" Text="BOSPOROTUES PIRATES" VerticalAlignment="Top" FontWeight="Normal" FontSize="14" Width="197" Foreground="#FFF9DD06" >
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Direction="338"/>
</TextBlock.Effect>
</TextBlock>
<Rectangle Canvas.ZIndex="-1" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="2" Width="Auto" RadiusX="7" RadiusY="7" Opacity="0.15" Fill="White" />
<c1ext:C1Expander Height="Auto" HorizontalAlignment="Left" Margin="6,22,5,10" Name="c1Expander1" VerticalAlignment="Top" Width="255" IsExpanded="True">
<Grid HorizontalAlignment="Stretch" Name="grid6" VerticalAlignment="Stretch" ShowGridLines="False" Height="50">
<ListBox Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="listBox1" VerticalAlignment="Stretch" Width="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBoxItem Content="sdfgdsfgdsfg" />
<ListBoxItem Content="sdfhsdfhdsfh" />
<ListBoxItem Content="sdfhsdfhsdfh" />
<ListBoxItem Content="sdfhsdfhsdfh" />
<ListBoxItem Content="sdfhdsfhsdfh" />
<ListBoxItem Content="sdfhdsfhd" />
<ListBoxItem Content="tttttttttt" />
</ListBox>
</Grid>
</c1ext:C1Expander>
</Grid>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#9FFFFFFF" Offset="0" />
<GradientStop Color="White" Offset="0.654" />
<GradientStop Color="#4A408B9D" Offset="0.423" />
<GradientStop Color="#BA002D76" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</DataTemplate>
Try setting the "MaxHeight" property of your ListBox. Then your ListBox height should adjust accordingly until the MaxHeight is achieved and then the scrollbar will appear.

Resources