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>
Related
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>
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"/>
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.
I got the following xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="_sampleText"
Grid.Row="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Width="200"
Height="50"
FontSize="36"
Text="Hello world"
TextAlignment="Center"
Visibility="Collapsed" />
<Border Grid.Row="1"
Width="{Binding ActualWidth, ElementName=_sampleText}"
Height="{Binding ActualHeight, ElementName=_sampleText}">
<Border.Background>
<VisualBrush Stretch="None"
Visual="{Binding ElementName=_sampleText}" />
</Border.Background>
</Border>
</Grid>
I want my visual to be render even if the control he bind too is not visible. Is there a way of doing that?
You could also place the TextBlock in a Border and make that Hidden:
<Border Visibility="Hidden">
<TextBlock ... />
</Border>
No. If the Visibility=Collapsed then it won't take part in the measure/arrange layout pass and not be rendered (the Width and Height will be 0).
What effect are you trying to achieve? It looks like you want a preview pane? Reply in the comments and we can figure out the best approach.
Edit: There is a way to call the measure/update on a UIElement from code-behind however I think the best-approach for you would be use a BoolToVisibilityConverter.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<CheckBox x:Name="OptionCheckBox" Grid.Row="0" />
<Border Grid.Row="1" Visibility="{Binding Path=IsChecked, ElementName=OptionCheckBox", Converter={StaticResouce BoolToVisibilityConverter}}">
<TextBlock Width="200" Height="50" FontSize="36" Text="Hello world" TextAlignment="Center"/>
</Border>
</Grid>
I want to fill a panel with rectangles, and when the panel is resized, the rectangles should resize as well.
Why doesn't the following work?
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle Fill="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Rectangle Fill="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Rectangle Fill="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Page>
I would prefer not to use a Grid because of the pain of adding/removing columns and rearranging the children. (I was looking forward to StackPanel because if I wanted to add a yellow Rectangle at the beginning, I just declare it. I don't have to re-order the others by hand.)
Or a UniformGrid:
<UniformGrid Columns="1">
<Rectangle Fill="Red"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Blue"/>
</UniformGrid>
You're using a StackPanel whose behavior is to take the size of its children. Use a Grid which takes the whole available size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="Red" Grid.Row="0" />
<Rectangle Fill="Green" Grid.Row="1" />
<Rectangle Fill="Blue" Grid.Row="2" />
</Grid>