How to cut cut through a panel ? img inside !

How-to Discussions
1

Hi

Is there any way how i can achieve this result with fuse ?

file

what i have on my fuse editor

file

is there any trick to do this ?

Thanks you :slight_smile:

2

Without seeing any code, it seems that the best solution would be to just draw the PNG to look exactly how you need it. Specifically, fill in the transparent background with a solid gray color and you’ll have it like on the first picture.

3

On a second thought, if you want the icon to be transparent, you should look into using Mask.

Here’s an example of how that could be done:

<App>
	<DockPanel>
		<DockPanel Height="56" Dock="Bottom">
			<Panel Width="16" Dock="Right" Color="Aqua" />
			<Image File="icon.png" Alignment="Right" Layer="Overlay" Margin="16,0" Anchor="100%,100%" />
			<Panel Width="56" Dock="Right" Color="Aqua">
				<Mask File="invertmask.png" Mode="Alpha" />
			</Panel>
			<Panel Color="Aqua" />
		</DockPanel>
		<Panel />
		<Image Url="https://source.unsplash.com/9wociMvaquU/480x640" Layer="Background" StretchMode="UniformToFill" />
	</DockPanel>
</App>

The two files I’ve used in the example above are these:
icon and mask - save them to the project root folder.

I did not test this on devices, but on my local preview it looks like this:

file
I1eBjOXJOEad-image-1502185711394.47.54.png754×1338

4

Thanks you very much , its working . but i cant find a way to fill the space beetwen every dockpanel element .

file

here is my code :

<DockPanel Height="60" Dock="Bottom">
  			<Panel Width="16" Dock="Right" Color="#d74553" />
  			<Image File="Assests/Icons/Heart.png" Alignment="Right" Layer="Overlay" Anchor="100%,100%" Margin="0, 0, 0, 0" Padding="0, 0, 34, 0" Dock="Fill" />
  			<Panel Width="70" Dock="Right" Color="#d74553" Padding="0, 0, 0, 0" Opacity="1">
  				<Mask File="Assests/Icons/HeartMask.png" Mode="Alpha" />
  			</Panel>

        <Circle Opacity="1" Width="60" Alignment="Left" Height="65" Layer="Overlay" Dock="Fill" Margin="12, 0, 0, 100" Padding="0, 0, 0, 0">
          <Icon File="Assests/Icons/copy.png" Size="24" Opacity="1" />
          <Stroke Width="2" Color="White" />
        </Circle>
        <Panel Dock="Left" Color="#d74553" Margin="12, 0, 0, 0" Alignment="Left" Width="60">
  				<Mask File="Assests/Icons/CircleMask.png" Mode="Alpha" />
  			</Panel>
        
        <Circle Opacity="1" Width="60" Alignment="Left" Height="65" Layer="Overlay" Dock="Fill" Margin="82, 0, 0, 100">
          <Icon File="Assests/Icons/next.png" Size="24" Opacity="1" />
          <Stroke Width="2" Color="White" />
        </Circle>
        <Panel Dock="Left" Color="#d74553" Alignment="Left" Width="60" Padding="0, 0, 0, 0" Margin="10, 0, 0, 0">
          <Mask File="Assests/Icons/CircleMask.png" Mode="Alpha" />
        </Panel>

        <Panel Dock="Fill" Color="#d74553" />
		</DockPanel>

thanks you

5

Take a look at the code I originally shared. You want to avoid using Margin and Padding and instead put Panels of the desired width (and color) in places where you need the spacing.

6

Got it ! thanks you very much .