Answered by:
How to make button/image composed of few images

Question
-
Hi,
I woluld like to make a custom button or image composed of few images. Also I woild like to add a listener to some of them. Also the images/buttons will be placed in GridVew. I am pasting a picture of a button made in HTML5. Does anybody have an idea?
Tuesday, August 27, 2013 9:25 AM
Answers
-
Hi,Blaz
You can use UserControl class to build a new control,so you can using it multiple times in an
app.
If you want to create an image composed of few image in the Gridview.You can set a Grid in
the Gridview and use ImageBrush to fill the Grid BackGround.Also,you can adjust the images
position use the Grid.Row or Grid.Column property.There are some codes below may can help
you:
<UserControl x:Class="UserControlExample.NameReporter" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <GriView > <Grid Width=" 600" Height="600"> <Grid.RowDefinitions> <RowDefinition Height="300"></RowDefinition> <RowDefinition Height="200"></RowDefinition> <RowDefinition Height="100"></RowDefinition> </Grid.RowDefinitions> <Grid.Background> <ImageBrush ImageSource="Assets/Psu45.jpg"/> </Grid.Background> <StackPanel Orientation="Horizontal" Grid.Row="2" Background="Transparent"> <Image Source="Assets/images.jpg" Height="50" Width="50" /> <Image Source="Assets/images.jpg" Height="50" Width="50" /> <Image Source="Assets/images.jpg" Height="50" Width="50" /> </StackPanel> </Grid> </GridView> </UserControl>
Best Wishes!
<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.Wednesday, August 28, 2013 1:08 PM
All replies
-
If i understood your question right you want to repeat an image in every row of the grid, and this image can be created with a set of images.
Try this:
<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvTest_RowDataBound"> <Columns> <asp:BoundField ReadOnly="True" HeaderText="ID"></asp:BoundField> <asp:TemplateField HeaderText="Name" HeaderStyle-HorizontalAlign="Left"> <ItemTemplate> <div class="bigImage"> <asp:Button ID="smallButton1" runat="server" class="smallButton1" OnClientClick="javascript:return true;" OnClick="smallButton1_Click"> </asp:Button> <asp:Button ID="smallButton2" runat="server" class="smallButton2" OnClientClick="javascript:return false;"> </asp:Button> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { List<int> list = new List<int>(); list.Add(1); list.Add(2); gvTest.DataSource = list; gvTest.DataBind(); } } protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e) { } protected void smallButton1_Click(object sender, EventArgs e) { //Do your work here }
.bigImage { background: url(desert.jpg) no-repeat; width: 100px; height: 100px; ; } .smallButton1 { background: url(block.png) no-repeat; width: 10px; height: 10px; ; bottom: 10px; left: 10px; cursor:pointer; } .smallButton2 { background: url(block.png) no-repeat; width: 10px; height: 10px; ; bottom: 10px; left: 30px; }
Please change the image URL(s) accordingly..- Edited by AbhishekJain86 Tuesday, August 27, 2013 12:12 PM
Tuesday, August 27, 2013 12:07 PM -
Hi,Blaz
You can use UserControl class to build a new control,so you can using it multiple times in an
app.
If you want to create an image composed of few image in the Gridview.You can set a Grid in
the Gridview and use ImageBrush to fill the Grid BackGround.Also,you can adjust the images
position use the Grid.Row or Grid.Column property.There are some codes below may can help
you:
<UserControl x:Class="UserControlExample.NameReporter" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <GriView > <Grid Width=" 600" Height="600"> <Grid.RowDefinitions> <RowDefinition Height="300"></RowDefinition> <RowDefinition Height="200"></RowDefinition> <RowDefinition Height="100"></RowDefinition> </Grid.RowDefinitions> <Grid.Background> <ImageBrush ImageSource="Assets/Psu45.jpg"/> </Grid.Background> <StackPanel Orientation="Horizontal" Grid.Row="2" Background="Transparent"> <Image Source="Assets/images.jpg" Height="50" Width="50" /> <Image Source="Assets/images.jpg" Height="50" Width="50" /> <Image Source="Assets/images.jpg" Height="50" Width="50" /> </StackPanel> </Grid> </GridView> </UserControl>
Best Wishes!
<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.Wednesday, August 28, 2013 1:08 PM