Does any body know how to achive the output of the XAML below to HTML5 and CSS3:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="33" />
<RowDefinition Height="29" />
<RowDefinition Height="*"/>
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="98" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="98" />
</Grid.ColumnDefinitions>
<Border x:Name="header" Grid.Row="0" Grid.Column="1"/>
<Border x:Name="mainNav" Grid.Row="1" Grid.Column="1"/>
<Border x:Name="secondNav" Grid.Row="2" Grid.Column="1"/>
<Border x:Name="body" Grid.Row="3" Grid.Column="1"/>
<Border x:Name="footer" Grid.Row="4" Grid.Column="1"/>
</Grid>
Thanks
If I understand you correctly, you just want this code snipped translated to HTML/CSS. A one-to-one translation is shown below.
However, HTML/CSS is a different medium than XAML. E.g. there is no easy way to do Width="*" in CSS and there is no grid-system built in, so you have to build it with floats (this is for historical reasons, CSS was invented to style text documents, not build layouts). So I would recommend that you look at a more web-friendly solution: a widely-used HTML/CSS scaffolding framework with rows and columns is Bootstrap.
Crude one-to-one translation:
<!DOCTYPE html>
<html>
<head>
<style>
.grid > div > div {
float: left;
outline: 1px solid black;
height: 100%;
min-width: 30px;
}
.header {
height: 100px;
}
.mainNav {
height: 33px;
}
.secondNav {
height: 29px;
}
.body {
height: 30px;
}
.footer {
height: 75px;
}
.grid-column-1 {
width: 98px;
}
.grid-column-2 {
}
.grid-column-3 {
width: 98px;
}
</style>
</head>
<body>
<div class="grid">
<div class="header">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
<div class="mainNav">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
<div class="secondNav">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
<div class="body">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
<div class="footer">
<div class="grid-column-1"></div>
<div class="grid-column-2"></div>
<div class="grid-column-3"></div>
</div>
</div>
</body>
</html>
Related
How can I import a png image into a nextJS svg component.
This is the sample code I'm working with.
<Page title="Logo Designer" className="max-w-xl">
<div>
<svg id="logoDesigner" width={700} height={600} style={{ backgroundColor: 'lightgray' }}>
<rect class="draggable" x="4" y="5" width="80" height="100" fill="#007bff" />
<rect class="draggable" x="18" y="5" width="80" height="400" fill="#888" />
</svg>
</div>
</Page>
you can use the image tag
<image
width="100"
height="100"
xlink:href="my-logo.png"
/>
make sure to change the width height and xlink:href based on your need
In my Silverlight Application , I have a label which contains the copyright information.I want to show the label always at the bottom of the screen in every resolution.
<sdk:Label
Height="28"
x:Name="label1"
Width="422"
Content="Copyright © 2013. All rights reserved." Margin="253,662,252,-41" />
with margin I am only able to show it at bottom on my screen.
How to do it?
You can use Grid with two Rows. One "Stretch" Height="*" and the second adaptable to content Height="Auto". Use HorizontalAlignment for the label :
<Grid x:Name="LayoutRoot" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<!-- Main content -->
</Grid>
<!-- Put the label in row 1 : Grid.Row="1"-->
<!-- elastic width :) : HorizontalAlignment="Stretch"-->
<sdk:Label
Grid.Row="1"
Height="28"
x:Name="label1"
HorizontalAlignment="Stretch"
Content="Copyright © 2013. All rights reserved." />
</Grid>
I have a need to reproduce this CSS in WPF/XAML:
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0;">Foo bar</div>
<div style="position: absolute; top: 0; left: 0;">Foo bar</div>
</div>
In essence, I need to have two elements positioned on top of each other within their container.
So far I have:
<StackPanel>
<TextBlock Text="Foo bar">
<TextBlock Margin="0,-16,0,0" Text="Foo bar">
</StackPanel>
The problem with above is that it does not scale. I don't want to hard code any margin figures.
Place then on the same cell of a grid:
<Grid>
<TextBlock Text="Foo bar">
<TextBlock Text="Bar foo">
</Grid>
Note: Since there's no RowDefinitions or ColumnDefinitions specified, the grid have a default 1 row / 1 column. Since the elements don't have the property Grid.Row or Grid.Column set, they are placed on the 0,0 cell
When I need to do non-pixel positioning, I usually put my items in a grid with rows or columns on the sides with a percentage or "star" value for padding. That does scale.
So something like:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Height="10*"/>
<ColumnDefinition Height="80*"/>
<ColumnDefinition Height="10*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="FooBar" Grid.Column="1"/>
</Grid>
Will render a textbox whose left edge is 10% from the left, no matter what the zoom.
I'd like to have 4 buttons one in each corner of a WPF/Silverlight window. But I want the stuff in the grid/window to be "behind" the buttons, as if they float on top.
<Grid x:Name="ButtonRoot">
<Button VerticalAlignment="Top" HorizontalAlignment="Left"
Name="bTopLeft" />
<Button VerticalAlignment="Top" HorizontalAlignment="Right"
Name="bTopRight" />
<Button VerticalAlignment="Bottom" HorizontalAlignment="Left"
Name="bBottomLeft" />
<Button VerticalAlignment="Bottom" HorizontalAlignment="Right"
Name="bBottomRight" />
<!-- Other junk here -->
</Grid>
The problem is, the buttons will not be "over" things, as the things will "wrap" around the buttons. How do I achieve this effect?
Diagram of how I want it http://dl.compdj.com/images/stackButton.jpg
Use two grids, remember whatever is farther down the file will be on top:
<Grid>
<Grid Background="Green"><!-- put stuff here --></Grid>
<Grid><!-- this goes on top -->
<Button Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Content="Button" /><!-- top left button -->
<!-- etc -->
</Grid>
</Grid>
this should solve your problem
#bTopLeft {
position: absolute;
top: 0;
left: 0;
z-index: 1200;
}
Silverlight virgin here. How do I make the usercontrol surrounding my grid automatically resize to accomodate the grid width inside? Currently the usercontrol is displaying at about 300 or 400 pixels when the browser window is much wider. It renders both vertical and horizontal scroll bars around the data grid which is ugly. I want to set the control width to "100%", but this does not appear to be supported. What am I missing?
Here's my xaml so far:
<UserControl x:Class="RichMedia.MainPage"
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:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid Name="dataGrid1" AutoGenerateColumns="False"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
DataContext="{Binding}" />
</Grid>
</UserControl>
EDIT: I should add that I am using the default containers in Visual Studio 2010 created when adding a silverlight app to an existing Web Application Project.
Below is the markup from the hosting page:
<%# Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
...
<style type="text/css">
html, body { height: 100%; overflow: hidden; }
body { padding: 0; margin: 0; }
html, body { height: 100%; overflow: hidden; }
#silverlightControlHost { height: 100%; text-align:center; }
</style>
<script type="text/javascript" src="Scripts/Silverlight.js"></script>
...
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/RichMedia.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
</html>
You need place Width:100% and Height:100% in the style of the object tag in the HTML holding it. You also need to make sure the containing element (probably the body) has the height of the view port. This is done by ensuring the style "height:100%; overflow:hidden;" is on the html tag and the body tag. Put margin:0px on the body and place the attribute scroll="no" on the body as well for good measure. Now your Silverlight control owns and sizes to the browsers client window area.
Also remove the Width="Auto" and Height="Auto" from the UserControl.