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?

 

Answer 1

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..

Answer 2

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.