Xamarin forms transparency and custom control - wpf

I'm developing a cross-platform game board (WPF and Android).
I have a grid inside a scrollView layout and in each cell i inflate this
cell custom control
<ContentView.Content>
<Frame x:Name ="fr" BorderColor="Black" Padding="0">
<Grid HorizontalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" x:Name="txt"/>
<Image Grid.Row="0" x:Name="img"/>
</Grid>
</Frame>
</ContentView.Content>
The problem is that in Android the control is not transparent as in WPF.
see:
WPF
Android

Try using Transparent background color for the Frame:
<ContentView.Content>
<Frame x:Name ="fr" BackgroundColor="Transparent" BorderColor="Black" Padding="0">
<Grid HorizontalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" x:Name="txt"/>
<Image Grid.Row="0" x:Name="img"/>
</Grid>
</Frame>
</ContentView.Content>

Related

WPP vertical scrollViewer is not apprearing

I have a wpf user control which has Grid with row definitions as Auto. and controls defined in that in grid. Outside of this this i have scroll viewer VerticalScrollBarVisibility as set to Auto.
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name" />
<telerik:RadRichTextBox Name="Name" Grid.Row="0" Margin="2"
Padding="0" HorizontalAlignment="Left" AcceptsReturn="True"
Height="500" Width="750" DocumentInheritsDefaultStyleSettings="True" FontFamily="Calibri" FontSize="13">
<telerik:RadRichTextBox.Document>
<telerik:RadDocument LineSpacingType="AtLeast" LineSpacing="0"
ParagraphDefaultSpacingAfter="0" ParagraphDefaultSpacingBefore="0">
</telerik:RadDocument>
</telerik:RadRichTextBox.Document>
</telerik:RadRichTextBox>
</Grid>
</ScrollViewer>
I am loading the above control as content of Rad tab item from another view.
I could not able to view vertical scroll bar when i resize the window.
You can do this
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
......
<telerik:RadRichTextBox Grid.Row="1" ......
/>

WPF Zoom Control implement MiniMap

I have implemented simple zoom control in my project using Slider control:
<Grid Grid.Row="1" Grid.Column="0" Margin="5,5,5,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Name="ZoomIncButton" Content="+" Margin="2" Grid.Row="0" Click="ZoomIncButton_Click"/>
<Slider x:Name="ZoomCtrl" Orientation="Vertical" Grid.Row="1"
Minimum="0.0" Maximum="8.0" LargeChange="0.15" SmallChange="0.01" Value="1.0"/>
<Button Name="ZoomDecButton" Content="-" Margin="2" Grid.Row="2" Click="ZoomDecButton_Click"/>
</Grid>
I would like to implement a minimap which can show where exactly user is on the zoomed UI. I do not want to use any 3rd party controls.
Please let me know if there are any sample/starter code for the same.
Thanks,
RDV
I found the solution via this project:
http://www.codeproject.com/Articles/85603/A-WPF-custom-control-for-zooming-and-panning
I was looking for some ideas to implement Overview window which are clearly described here.
Thanks,
RDV

How to style a page in XAML

I'm really new to XAML and Metro and my old HTML skills are not in my advance.
What i want to achive is to have 3 "rows", the top row as some kind of header, the last row as some kind of footer and then a scrollable content area in the middle.
How can I achive this in XAML for Metro?
I've tried the StackPanel but I can't get the middle one to stop expanding and putting my "footer" out or the screen.
read more about WPF Layouts,
Grid in WPF is similar to Table in HTML, you should do this if you want header and footer.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/> <!--Header-->
<RowDefinition/>
<RowDefinition Height="50"/> <!--Footer-->
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Header"></TextBlock>
<ScrollViewer Grid.Row="1">
<!--your Controls-->
</ScrollViewer>
<TextBlock Grid.Row="2" Text="Footer"></TextBlock>
</Grid>
Try this,
<Grid x:Name="GridName">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Header"/>
<StackPanel Orientation="Vertical" Grid.Row="1">
<!-- Other Controls -->
</StackPanel>
<TextBlock Grid.Row="2" Text="Footer" />
</Grid>

Trying to set user control height to 100% within grid

I'm having problems trying to set a user control to 100% height of the second row of the grid. My UserControl has no attributes for width/height (Auto). The code below puts the user control over the Label control... I haven't the slightest clue what I may doing wrong. Any ideas?
<Grid Grid.Row="0" Grid.Column="1" Background="White" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<sdk:Label Content="Task Configuration" FontSize="12" FontWeight="Bold" Background="#1E000000" Grid.Row="0" Padding="5,0,0,0" >
</sdk:Label>
<my:TaskConfig Grid.Row="1" Height="Auto" />
</Grid>

Set in Silverlight an image to specific location

I am working on a WP7 app. Well on one of the pages I would like to have a question mark available for users to select. Only trouble I am having is keeping it in a set location. If real estate is available, I want it to be at the bottom right corner all the time. But if the user should need to scroll, I want that item to have to be scrolled to as well.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
....
<StackPanel Grid.Row="1">
<Image Source="/Images/question_mark.png" Stretch="None"
VerticalAlignment="Bottom" HorizontalAlignment="Right" />
</StackPanel>
</Grid>
So how can I keep an image/button at the bottom of the page? Do I need to change anything so that it will always be at the bottom if the user needs to scroll? I appreciate your help!
It sounds like you want the image to be on the bottom of the scrollable content. To do so, place a StackPanel inside of a ScrollViewer
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<Rectangle Height="400" Fill="Brown" />
<Rectangle Height="400" Fill="Green" />
<Image Source="/Images/question_mark.png" Stretch="None"
VerticalAlignment="Bottom" HorizontalAlignment="Right" />
</StackPanel>
</ScrollViewer>
</Grid>

Resources