Create custom shaped buttons in WPF
-
Hello, I need to create a custom shaped button which looks like a forward arrow. Three or four of such buttons are to be placed next to each other in such a way that the tip of the first button is just near the tail of the next button I have made a style for the button using polygon in .xaml & assigned this style to the button. Now, if i add this button to a form, i can see this button in the desired style. But, still the button has the rectangular shape, which is not visible as the borders & remaining area are transparent. So, the button occupies a rectangular area on the form irrespective of the style which i created. Because of this, i cannot keep the forward shaped butons next to each other, as close as desired. Here, for the tip of one forward button to come near the tail of the next button, the rectangular area of the buttons must overlap, which is not correct. Is there any way to remove the rectangular area of the button & make it exactly to occupy the desired shape as specified by the style. The .xaml file for my code is given below
<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <Polygon Fill="{TemplateBinding Background}" Points="10,10 80,10 120,45 80,75 10,75 45,45" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsFocused" Value="True"/> <Trigger Property="IsDefaulted" Value="True"/> <Trigger Property="IsMouseOver" Value="True"/> <Trigger Property="IsPressed" Value="True"/> <Trigger Property="IsEnabled" Value="False"/> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Button Style="{DynamicResource P -
Hello, I need to create a custom shaped button which looks like a forward arrow. Three or four of such buttons are to be placed next to each other in such a way that the tip of the first button is just near the tail of the next button I have made a style for the button using polygon in .xaml & assigned this style to the button. Now, if i add this button to a form, i can see this button in the desired style. But, still the button has the rectangular shape, which is not visible as the borders & remaining area are transparent. So, the button occupies a rectangular area on the form irrespective of the style which i created. Because of this, i cannot keep the forward shaped butons next to each other, as close as desired. Here, for the tip of one forward button to come near the tail of the next button, the rectangular area of the buttons must overlap, which is not correct. Is there any way to remove the rectangular area of the button & make it exactly to occupy the desired shape as specified by the style. The .xaml file for my code is given below
<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <Polygon Fill="{TemplateBinding Background}" Points="10,10 80,10 120,45 80,75 10,75 45,45" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsFocused" Value="True"/> <Trigger Property="IsDefaulted" Value="True"/> <Trigger Property="IsMouseOver" Value="True"/> <Trigger Property="IsPressed" Value="True"/> <Trigger Property="IsEnabled" Value="False"/> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Button Style="{DynamicResource PDon't post this is in both the forums and Q&A - pick one and stick with it.
Ideological Purity is no substitute for being able to stick your thumb down a pipe to stop the water
-
Hello, I need to create a custom shaped button which looks like a forward arrow. Three or four of such buttons are to be placed next to each other in such a way that the tip of the first button is just near the tail of the next button I have made a style for the button using polygon in .xaml & assigned this style to the button. Now, if i add this button to a form, i can see this button in the desired style. But, still the button has the rectangular shape, which is not visible as the borders & remaining area are transparent. So, the button occupies a rectangular area on the form irrespective of the style which i created. Because of this, i cannot keep the forward shaped butons next to each other, as close as desired. Here, for the tip of one forward button to come near the tail of the next button, the rectangular area of the buttons must overlap, which is not correct. Is there any way to remove the rectangular area of the button & make it exactly to occupy the desired shape as specified by the style. The .xaml file for my code is given below
<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <Polygon Fill="{TemplateBinding Background}" Points="10,10 80,10 120,45 80,75 10,75 45,45" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsFocused" Value="True"/> <Trigger Property="IsDefaulted" Value="True"/> <Trigger Property="IsMouseOver" Value="True"/> <Trigger Property="IsPressed" Value="True"/> <Trigger Property="IsEnabled" Value="False"/> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Button Style="{DynamicResource P -
Hello Abhinav, Thanks for the reply. If you noticed my query, i am already making some custom shaped button. The actual requirement is about alignment of the controls, close to each other. Any control in .NET has a rectangular shape. We can see a rectangular shape around any control while adding to the UI. My question is regarding avoiding this rectangular shape. This alignment can be done by adding 2 of such buttons in a canvas or a single cell in a datagrid, by making the controls ovelapping each other (not the graphical area, only the transparent rectangular part of the control). But, if i need to add them in such a way in stack panel or any other container which adds controls next to each other, the second control is added only after the transparent rectangular part of the control. So, i am lloking for an option to change the underlying rectangular layout, whcih is not visible at run time. Is there any way to achieve this?
Best Regards, Abhilash
