locked
How to make button/image composed of few images RRS feed

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


    • Edited by Anne Jing Wednesday, August 28, 2013 1:10 PM from
    • Marked as answer by Anne Jing Tuesday, September 3, 2013 1:22 PM
    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..
    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.


    • Edited by Anne Jing Wednesday, August 28, 2013 1:10 PM from
    • Marked as answer by Anne Jing Tuesday, September 3, 2013 1:22 PM
    Wednesday, August 28, 2013 1:08 PM