Stumped by 3D button border (I don't want it)

Question

Hello,

As the subject says I can't figure out why my button is getting a 3D appearance. The XAML is:

<Window x:Class="WPFKiosk.Windows.winKioskFrame"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowState="Maximized" WindowStyle="None" WindowStartupLocation="CenterScreen" 
        MaxWidth="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Width}" 
        MaxHeight="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height}">
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="75" />
        </Grid.RowDefinitions>

        <Image Grid.Column="0" Source="/WPFKiosk;component/Images/logo.png" HorizontalAlignment="Left" VerticalAlignment="Top"/>

        <Button x:Name="btn_ReturnMenu" Grid.Row="1" Click="Button_Click" Width="75" HorizontalAlignment="Center" FontSize="18">
            <Button.Background>
                <ImageBrush ImageSource="/WPFKiosk;component/Images/button_round_green.png" />
            </Button.Background>
            <TextBlock>
                Back
            </TextBlock>
        </Button>
        
        <Frame Grid.Column="1" x:Name="frameKioskTarget"/>
    </Grid>
</Window>

Which gives me:

I've looked for any styles, resoure dict. or other influences and I'm missing something. I created a new window and put the same code in there and got the same 3d effect. I created a whole new project and got it there too...so clearly there is something I'm missing. I'm not totally sure it is the image either. I was wondering if the grid it is placed in might be adding the border??

TIA

JB

Answer 1

Hi,

Check below Rounded in Button Sample in WPF.

http://www.codeproject.com/Articles/32257/A-Style-for-Round-Glassy-WPF-Buttons

Regards

Gautam

Answer 2

Switching to this style did work...but it still doesn't explain why the other way didn't.

Answer 3

From your code , it is evident that , green circle is caused by <ImageBrush ImageSource="/WPFKiosk;component/Images/button_round_green.png" />.

Grid cannot add border , it dont have border brush/border thickness property. Neverthless grid is rectangular area and is meant as container to hold controls which can be resized as gird resizes.

Now coming back to your question , since no button style/control template is supplied, it takes the default button style/template from system.

So , it shows a border since default template would have defined a border. Now , if you want to disable it(to not show it) just make BorderBrush="{x:Type Null}" and BorderThickness="0 "

Above will work only if in the default system template BorderBrush & BorderThickness are TemplateBinded to the proper controls.(which i guess it should)

If above doesnt work then just supply your own ControlTemplate to your button.

Hope that clears your doubt !!

Hope that helps.

Plz dont forget to mark as answer if it helps.

Cheers !!

Answer 4

Hi zzpluralza,
 
I am marking your issue as "Answered", if you have new findings about your issue, please let me know.

Best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.