Monday, April 16, 2007

XAML Address Snippet

Testing to see how the XAML code formats.  I've not had much consistent luck formatting and displaying any sort of code on this blog. It always seems to want to scrunch everything
into a much smaller area that what should be available.
Looks like I'm also changing my blog style template so that I can suitably post code if I like.  I've intentionally left it out because it formats so badly using my old style sheet.
I'd like to see about possibly creating a custom control around the XAML below; see what that takes in WPF.  I know that when building an app, there needs to be a certain symmetry
to the layout and the positioning of controls.. the address input always seemed to be a natural candidate for a custom control...maybe its too easy to just slap together all of the
appropriate labels and text boxes to make it worthwhile. It'll be interesting regardless.
Here is a sample of what the component would look like:



Here is the XAML to produce the 'address':
<GroupBox BorderThickness="1" Width="Auto" Margin="10,10,10,10" Background="AliceBlue">
<GroupBox.Header>
<Label>Address Information</Label>
</GroupBox.Header>

<Grid Name="Address1" Grid.Column="0" Margin="10,10,6,10" HorizontalAlignment="Left" Height="Auto">
<Grid.Resources>
<Style TargetType ="{x:Type TextBox}">
<Setter Property="Margin" Value="4,4,4,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style TargetType="{x:Type Label}">
<Setter Property ="Margin" Value="4,4,4,4"/>
<Setter Property ="VerticalAlignment" Value="Top"/>
</Style>

<Style TargetType="{x:Type RowDefinition}">
<Setter Property ="Height" Value="Auto"/>
</Style>

</Grid.Resources>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>

<Label Grid.Column="0" Grid.Row="0" Content="Address Line 1" />
<Label Grid.Column="0" Grid.Row="1" Content="Address Line 2" />
<Label Grid.Column="0" Grid.Row="2" Content="Address Line 3" />
<Label Grid.Column="0" Grid.Row="3" Content="City" />
<Label Grid.Column="3" Grid.Row="3" Content="State" />
<Label Grid.Column="5" Grid.Row="3" Content="Zip" />


<TextBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Text="Address Line 1" Width="200" />
<TextBox Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="4" Text="Address Line 2" Width="200" />
<TextBox Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="4" Text="Address Line 3" Width="200" />
<TextBox Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="2" Text="City" Width="100" />
<ComboBox Grid.Column="4" Grid.Row="3" Width="Auto" SelectedIndex="0" Height="28">

<ComboBoxItem>AL</ComboBoxItem>
<ComboBoxItem>AR</ComboBoxItem>
<ComboBoxItem>OK</ComboBoxItem>
<ComboBoxItem>TX</ComboBoxItem>

</ComboBox>
<TextBox Grid.Column="6" Grid.Row="3" Text="Zip" Width="100" />
</Grid>

</GroupBox>


No comments:

Post a Comment