none
Cross button in WPF

    Question

  • Hey

    I am trying to create a delete button with a cross on it in XAML, but it doesn't work. Who can help me? I want a button with on cross on it in the middle of the button.

    Thx
    Thursday, August 27, 2009 7:51 AM

Answers

  • Hi,

    The code you showed works, but usually we place shapes in a Canvas. Alternatively, you can draw the cross using path, which is more lightweight. For example:

                <Button>
                    <Canvas Name="canvas" Height="25"  Width="25">
                        <Path Stroke="Red" StrokeThickness="2">
                            <Path.Data>
                                <PathGeometry>
                                    <PathGeometry.Figures>
                                        <PathFigure StartPoint="0,0">
                                            <LineSegment Point="25,25"/>
                                        </PathFigure>
                                        <PathFigure StartPoint="0,25">
                                            <LineSegment Point="25,0"/>
                                        </PathFigure>
                                    </PathGeometry.Figures>
                                </PathGeometry>
                            </Path.Data>
                        </Path>
                    </Canvas>             
                </Button>

    Hope this helps.

    Sincerely,
    Linda Liu


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    • Marked as answer by Sjasses Thursday, September 03, 2009 5:53 AM
    Wednesday, September 02, 2009 7:34 AM

All replies

  • Do you want to accomplish this with an image on a button? Or do you want to take care of the cross drawing yourself (which I actually don't recommend)? Please post code of what you have already tried.


    Geert van Horrik - CatenaLogic
    Visit my blog: http://blog.catenalogic.com

    Looking for a way to deploy your updates to all your clients? Try Updater!
    Thursday, August 27, 2009 8:04 AM
  • Hi

    I want do it with drawing to red lines on the button, see code below:

    <

     

     

    Button HorizontalAlignment="Right" Margin="0,2,0,12" Name="DeleteButton" Width="25" BorderThickness="0" FlowDirection="LeftToRight" Grid.IsSharedSizeScope="False" Grid.Row="1" Grid.Column="1" HorizontalContentAlignment="Center" Padding="0" VerticalAlignment="Center">
    <Grid FlowDirection="LeftToRight" HorizontalAlignment="Center" IsEnabled="True" ShowGridLines="False" VerticalAlignment="Center">
    <Line Stroke="Red" StrokeThickness="2" X1="0"  X2="25" Y1="0" Y2="25"> </Line> 
    <Line Stroke="Red" StrokeThickness="2" X1="0" X2="25" Y1="25" Y2="0"> </Line> 
    </Grid>
    </Button>
    Thursday, August 27, 2009 8:12 AM
  • Hi,

    The code you showed works, but usually we place shapes in a Canvas. Alternatively, you can draw the cross using path, which is more lightweight. For example:

                <Button>
                    <Canvas Name="canvas" Height="25"  Width="25">
                        <Path Stroke="Red" StrokeThickness="2">
                            <Path.Data>
                                <PathGeometry>
                                    <PathGeometry.Figures>
                                        <PathFigure StartPoint="0,0">
                                            <LineSegment Point="25,25"/>
                                        </PathFigure>
                                        <PathFigure StartPoint="0,25">
                                            <LineSegment Point="25,0"/>
                                        </PathFigure>
                                    </PathGeometry.Figures>
                                </PathGeometry>
                            </Path.Data>
                        </Path>
                    </Canvas>             
                </Button>

    Hope this helps.

    Sincerely,
    Linda Liu


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    • Marked as answer by Sjasses Thursday, September 03, 2009 5:53 AM
    Wednesday, September 02, 2009 7:34 AM
  • Thx it works fine
    Thursday, September 03, 2009 5:52 AM

  • Try it

    <Path Data="M0,0 L1,1 M0,1 L1,0" Stretch="Fill" Stroke="Black" StrokeThickness="3" Width="12" Height="12" />
                                                
    • Proposed as answer by Tempeck81 Thursday, March 08, 2012 7:21 AM
    Monday, November 08, 2010 9:11 AM