I want to display a list of checkboxes within a tooltip on Silverlight when the mouse hovers on an image.
The data is a list of string properties.
The problem: The checkbox text content disappears, only the checked boxes appear.
How to show both the box and its text content? Thanks.
Tooltip display
<ToolTipService.ToolTip >
<ToolTip d:DataContext="{d:DesignInstance Type=local:Data}">
<ListBox x:Name="LstTemp">
<!--<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="{Binding Input}"/>
</Style>
</ListBox.ItemContainerStyle>-->
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="true" IsEnabled="False" Content="{Binding Input}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ToolTip>
</ToolTipService.ToolTip>
</Image>
</Grid>
The code behind
Public Class Data
Public Property Data1 As String
Public Property Data2 As String
Public Property Input As New List(Of String)
End Class
I found the solution, here is the code for a dynamic list of checkboxes within a tooltip
<Image Height="114" HorizontalAlignment="Left" Margin="129,48,0,0" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="170" Source="/Tooltip1;component/Images/Desert.jpg" >
<ToolTipService.ToolTip >
<ToolTip d:DataContext="{d:DesignInstance Type=local:Data}">
<ListBox x:Name="LstTemp">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<CheckBox IsChecked="true" IsEnabled="false"/>
<ContentPresenter
Grid.Column="1"
Margin="2,0,0,0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</ToolTip>
</ToolTipService.ToolTip>
</Image>
Related
I'm porting over some Win RT code to UWP. One of the pages that doesn't work as expected is the HubPage.
I have a button in the HubSection HeaderTemplate which should be replacing the "see more" HyperLink. My button in my template appears but doesn't accept clicks.
The documentation states that I should be able to replace the "see more" hyperlink with my own template, I believe this is what my code is doing but doesn't work.
I'm unsure what value IsHeaderInteractive should be if I've attempting to replace the HubSection HeaderTemplate. Any help apprecaited
<Page
x:Class="Hub_Page.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hub_Page"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="HubSection">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Button Content="This doesn't click!"
Background="DarkCyan" Tapped="UIElement_OnTapped"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="outerGrid">
<Grid x:Name="innerGrid"
VerticalAlignment="Top">
<Hub x:Name="hub" SectionHeaderClick="Hub_OnSectionHeaderClick" >
<Hub.Header>
<!-- Back button and page title -->
<Grid>
<StackPanel Margin="13,0,20,0" Orientation="Horizontal">
<Button x:Name="backButton" Margin="0,0,20,0"/>
<TextBlock Text="x Manage Playlists" Margin="0,0,10,5" HorizontalAlignment="Left"/>
<Button Content="This does click"
Background="DarkGray" Tapped="UIElement_OnTapped"/>
</StackPanel>
</Grid>
</Hub.Header>
<!-- Playlists section -->
<HubSection Header="x Playlists" IsHeaderInteractive="True" >
<DataTemplate>
<ListView x:Name="playlistListView"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
SelectionMode="Single">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<!-- A playlist -->
<Grid HorizontalAlignment="Stretch">
<StackPanel Margin="10" Orientation="Vertical" HorizontalAlignment="Stretch" MaxWidth="500">
<TextBlock Text="{Binding Name}" TextTrimming="WordEllipsis" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Grid>
</Grid>
</Page>
It's by design. You could make your own HubSection's button by yourself. For example like the following:
<HubSection>
<DataTemplate>
<StackPanel>
<Button Content="Header" Click="Button_Click" Margin="0 0 0 10"></Button>
<TextBlock Text="here is content."></TextBlock>
</StackPanel>
</DataTemplate>
</HubSection>
I am trying to create a button Style that I can use for a "Lookup" button throughout my UWP app. However, the icon only appears on the first button on the screen. I tried this solution using templates, but it is not working for me. Thanks for the help.
Code:
<Page.Resources>
<ControlTemplate x:Key="FindSymbolTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</ControlTemplate>
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content">
<Setter.Value>
<ContentControl Template="{StaticResource FindSymbolTemplate}" />
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
....
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
....
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
The two buttons in the UI. Only the first has the SymbolIcon content.
#Romasz's solution absolutely works, but what if you want a lightly different Foreground on the SymbolIcon inside another Button?
Here's a potentially more flexible way that I normally go with.
First let's create a base Style that holds some default values for all the icons.
<Style x:Key="Style-Icon-Base"
TargetType="ContentControl">
<!-- If you don't specify the Foreground, it will use its ancestor's -->
<!--<Setter Property="Foreground"
Value="White" />-->
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Width"
Value="20" />
<Setter Property="Height"
Value="20" />
<Setter Property="Padding"
Value="0" />
</Style>
Then we create a new icon Style which inherits from the one above. Note within the ControlTemplate I have used TemplateBinding to make property values dynamic. TemplateBinding isn't available inside a DataTemplate.
<Style x:Key="Style-Icon-Find"
BasedOn="{StaticResource Style-Icon-Base}"
TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<!--
'cause you cannot change the size of the SymbolIcon, we insert a Viewbox here,
otherwise you don't need it.
-->
<Viewbox Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<SymbolIcon Symbol="Find"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This way you have created a highly reusable icon Style, to use it, have a look at the following Buttons:
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Margin="4"
Padding="8"
BorderBrush="LightBlue">
<ContentControl Width="36"
Height="36"
Foreground="DarkCyan"
Style="{StaticResource Style-Icon-Find}" />
</Button>
<!-- Note how I defined the Foreground at the Button level and it flows down to the icon -->
<Button Foreground="DarkGoldenrod"
Margin="4">
<StackPanel Orientation="Horizontal">
<ContentControl Style="{StaticResource Style-Icon-Find}"
Width="16"
Height="16" />
<TextBlock Text="Search"
VerticalAlignment="Center"
Margin="8,0,0,0" />
</StackPanel>
</Button>
<Button Margin="4"
Padding="4">
<ContentControl Style="{StaticResource Style-Icon-Find}" />
</Button>
</StackPanel>
And they look like:
Generally UI elements can be used once (or saying different - have only one parent) - this is probably why it only works for the first button in your case. One solution may be to define DataTemplate and use it as ContentTemplate, so each button creates its own icon:
<Page.Resources>
<DataTemplate x:Key="FindTemplate">
<SymbolIcon Symbol="Find" Foreground="White" />
</DataTemplate>
</Page.Resources>
...
<Button x:Name="tourNumLookup" ContentTemplate="{StaticResource FindTemplate}"
Grid.Column="1" Margin="10,0" VerticalAlignment="Center" />
<Button x:Name="customerIdLookup" ContentTemplate="{StaticResource FindTemplate}"
VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="10,0" />
You don't need to create ControlTemplate to reuse the icon. You can simply put this SymbolIcon to the resource dictionary and use as StaticResource for the buttons' Content.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
</Page.Resources>
<Button x:Name="tourNumLookup"
Content="{StaticResource FindSymbol}"
Grid.Column="1"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Content="{StaticResource FindSymbol}"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Margin="10,0" />
UPDATE
BTW this is possibly a bug in the UWP platform, because I tried the following code and only the first Button rendered the icon at desing time and none of the at runtime.
<Page.Resources>
<SymbolIcon x:Key="FindSymbol" Symbol="Find" Foreground="White" />
<Style TargetType="Button" x:Key="LookupButton">
<Setter Property="Content" Value="{StaticResource FindSymbol}"/>
</Style>
</Page.Resources>
<StackPanel>
<Button x:Name="tourNumLookup"
Style="{StaticResource LookupButton}"
Margin="10,0"
VerticalAlignment="Center" />
<Button x:Name="customerIdLookup"
Style="{StaticResource LookupButton}"
VerticalAlignment="Center"
Margin="10,0" />
</StackPanel>
I tried to assign the Setter's Value directly but I got the same result. And also tried with FontIcon.
I am kind of beginner in UWP Platform and I am building an app using template 10. I have used GridView for a particular page, but the problem is that the GridView shows its borders when you hover over it or select its item. Like this:
I want the border not to show up whenever the user hovers over it or selects a GridView item.
My XAML Code is:
<Page
x:Class="Sample.Views.Category"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sample.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:Sample.ViewModels"
xmlns:controls="using:Template10.Controls"
mc:Ignorable="d">
<Page.Resources>
<DataTemplate x:DataType="data:CategoryViewModel" x:Key="CategoryDataTemplate">
<StackPanel HorizontalAlignment="Center" Margin="10,0,20,10">
<Image Width="150" Source="{x:Bind IconFile}" />
<TextBlock FontSize="16" Text="{x:Bind Category}" HorizontalAlignment="Center" />
<!--<TextBlock FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center" />-->
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- header -->
<controls:PageHeader x:Name="pageHeader" Frame="{x:Bind Frame}" Text="Category Page" Grid.Row="0" Grid.ColumnSpan="2">
<!-- place stretched, across top -->
<RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
<RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
<RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
</controls:PageHeader>
<GridView Grid.Row="2" >
<GridView ItemsSource="{x:Bind Categories}"
IsItemClickEnabled="True"
ItemClick="GridView_ItemClick"
ItemTemplate="{StaticResource CategoryDataTemplate}" >
</GridView>
</GridView>
</Grid>
This is not a Template 10 question, but here's the answer:
<GridView>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0,0,4,4" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ItemContainerStyle>
</GridView>
Best of luck.
Try setting the gridview BorderThickness to 0, and brush to Transparent (assuming the thickness didn't work)
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.gridview.aspx
Here is a link to the properties for the gridview control in XAML.
since you said you're a beginner, try messing around with the different properties and since you have a nested gridview inside a gridview (not sure why) try setting it on both of them.
e.g.:
<GridView Grid.Row="2" BorderThickness="0">
I am making a button with a item template but when I click on Button its does not show that whether it is hit or not.
I want that it should look clicked like normal button.
I tried to set the ishitvisible property of the button but its not working.
Can anyone help ??
<Button Name="BtnSignUp" Grid.Row="3" VerticalAlignment="Top" Click="BtnSignUp_Click" >
<Button.Template>
<ControlTemplate>
<Border Margin="5,15,0,0" BorderThickness="2" BorderBrush="#866DA9">
<StackPanel Orientation="Horizontal" Background="#491776" IsHitTestVisible="True" >
<TextBlock Text="Sign Up Now -" Margin="35,5,0,0" FontSize="23" FontWeight="Medium"/>
<TextBlock Text=" it's free" Margin="0,5,35,10" FontSize="23" FontStyle="Italic" FontWeight="Normal" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
As you said, you are not using Item Template. You override Control Template. So you cannot get the default pressed effects of button. But still you can add that using Visual State Managers or through triggers.
I have posted an example of how to adjust opacity on mouse over and pressed.
<Button Name="BtnSignUp" Grid.Row="3" VerticalAlignment="Top" Click="BtnSignUp_Click" >
<Button.Template>
<ControlTemplate>
<Border Margin="5,15,0,0" BorderThickness="2" BorderBrush="#866DA9">
<StackPanel x:Name="bor" Orientation="Horizontal" Background="#491776" IsHitTestVisible="True" >
<TextBlock Text="Sign Up Now -" Margin="35,5,0,0" FontSize="23" FontWeight="Medium"/>
<TextBlock Text=" it's free" Margin="0,5,35,10" FontSize="23" FontStyle="Italic" FontWeight="Normal" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bor" Property="Opacity" Value="0.7"/>
</Trigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="Opacity" TargetName="bor" Value="0.6"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
In the WPF app we are building, we have 3 groups of RadioButtons in individual StackPanels side by side. We are trying to program the following behavior. When tabbing through the form, we don't want to tab through each of the radiobuttons (standard behavior), instead we would like to tab to the "first" radiobutton in each group and have the ability to arrow up/down to the other radiobuttons (list) in each group once we tab to the group. We have set the IsTabStop=False for the radiobuttons below each of the first radiobutton in the list. This gives us the desired behavior for tabbing through each group, but this does not allow for the ability to arrow up/down the list. The arrow up/down behavior only works if the IsTabStop=True. We also tried setting the GroupName attribute of the radiobutton, but the behavior is the same as described above. In the old win forms, there was a radiobutton list control that had this behavior and we are just trying to recreate it. Does anyone have any idea as to how to recreate this behavior? Thanks in advance for your help...!
I think the KeyboardNavigation attached properties will do the trick.
I mocked up a quick WPF example in XAML (sorry for the length), using ItemsControls to group the RadioButton elements:
<Window
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" mc:Ignorable="d"
x:Class="Experiment.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="91,139,0,0">
<ItemsControl KeyboardNavigation.IsTabStop="False" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.DirectionalNavigation="Contained">
<RadioButton Content="Alpha" KeyboardNavigation.TabIndex="2"/>
<RadioButton Content="Delta" KeyboardNavigation.TabIndex="2"/>
<RadioButton Content="Gamma" IsChecked="True" KeyboardNavigation.TabIndex="1"/>
<RadioButton Content="Beta" KeyboardNavigation.TabIndex="2"/>
</ItemsControl>
</Grid>
<Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="244,139,0,0">
<ItemsControl KeyboardNavigation.IsTabStop="False" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.DirectionalNavigation="Contained">
<RadioButton x:Name="First" Content="Eenee" KeyboardNavigation.TabIndex="2"/>
<RadioButton x:Name="Second" Content="Meenee" IsChecked="True" KeyboardNavigation.TabIndex="1"/>
<RadioButton x:Name="Third" Content="Mynee" KeyboardNavigation.TabIndex="2"/>
<RadioButton x:Name="Fourth" Content="Moe" KeyboardNavigation.TabIndex="2"/>
</ItemsControl>
</Grid>
<Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="391,139,0,0">
<ItemsControl KeyboardNavigation.IsTabStop="False" KeyboardNavigation.TabNavigation="Once" KeyboardNavigation.DirectionalNavigation="Contained">
<RadioButton Content="Extralarge" KeyboardNavigation.TabIndex="2"/>
<RadioButton Content="Large" KeyboardNavigation.TabIndex="2"/>
<RadioButton Content="Medium" KeyboardNavigation.TabIndex="2"/>
<RadioButton Content="Small" IsChecked="True" KeyboardNavigation.TabIndex="1"/>
</ItemsControl>
</Grid>
</Grid>
</Window>
A solution is to use the technique of styling a list box to look like a radio button group. Then it's possible to tab between the styled list boxes, and use arrow keys to select individual 'radio button' list box items.
Here's a complete demo which can also be downloaded as a sample application
public class RadioButtonGroupsViewModel
{
public RadioButtonGroupsViewModel()
{
Items1 = new List<string> {"One", "Two", "Three"};
Selected1 = "One";
Items2 = new List<string> {"Four", "Five", "Six"};
Selected2 = "Five";
Items3 = new List<string> {"Seven", "Eight", "Nine", "Ten"};
Selected3 = "Ten";
}
public IEnumerable<string> Items1 { get; private set; }
public string Selected1 { get; set; }
public IEnumerable<string> Items2 { get; private set; }
public string Selected2 { get; set; }
public IEnumerable<string> Items3 { get; private set; }
public string Selected3 { get; set; }
}
Xaml
xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
<Page.Resources>
<Style x:Key="RadioButtonListBoxStyle" TargetType="ListBox">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<RadioButton
IsTabStop="False"
GroupName=""
IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}" >
<RadioButton.Content>
<Border VerticalAlignment=
"{TemplateBinding Control.VerticalContentAlignment}" Padding="2">
<ContentPresenter
Margin="{TemplateBinding Control.Padding}"
VerticalAlignment=
"{TemplateBinding Control.VerticalContentAlignment}"
HorizontalAlignment=
"{TemplateBinding Control.HorizontalContentAlignment}"
RecognizesAccessKey="True" />
</Border>
</RadioButton.Content>
</RadioButton>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Page.DataContext>
<Samples:RadioButtonGroupsViewModel />
</Page.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ListBox Style="{StaticResource RadioButtonListBoxStyle}"
ItemsSource="{Binding Items1}"
SelectedItem="{Binding Selected1}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<ListBox Grid.Row="1"
Style="{StaticResource RadioButtonListBoxStyle}"
ItemsSource="{Binding Items2}"
SelectedItem="{Binding Selected2}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<ListBox Grid.Row="2"
Style="{StaticResource RadioButtonListBoxStyle}"
ItemsSource="{Binding Items3}"
SelectedItem="{Binding Selected3}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
To change the orientation from left to right use the FlowDirection property to RightToLeft.
RadioButton is used in the group so that user can select only one option from the available options (No extra coding is required to uncheck others). Use same GroupName of the radiobuttons to mark in a group so that only one option can be selected as follows.
<RadioButton Height="16" Margin="26,18,132,0" Name="RadioButton_Option1" VerticalAlignment="Top" Background="Snow" BorderBrush="Black" GroupName="Visit_eggHeadcafe.com" Foreground="DarkBlue">ASP.net Articles </RadioButton>
<RadioButton Height="16" Margin="26,18,132,0" Name="RadioButton_Option2" VerticalAlignment="Top" Background="Snow" BorderBrush="Black" GroupName="Visit_eggHeadcafe.com" Foreground="DarkBlue">C# Articles</RadioButton>
<RadioButton Height="16" Margin="26,18,132,0" Name="RadioButton_Option3" VerticalAlignment="Top" Background="Snow" BorderBrush="Black" GroupName="Visit_eggHeadcafe.com" Foreground="DarkBlue">ADO.net Articles</RadioButton>
<RadioButton Height="17" Margin="26,18,115,0" Name="RadioButton_Option4" VerticalAlignment="Top" Background="Snow" BorderBrush="Black" GroupName="Visit_eggHeadcafe.com" Foreground="DarkBlue" Width="164">SQL Server 2005 Articles</RadioButton>
<Button Margin="26,18,132,0" Width="75" Height="20" Click="Button_Click">Open Articles</Button>
</StackPanel >