I have my application and now I want to add a close button. I created it in the designer with a Image (Maybe there is a better way! If so, please answer) and everything seems to work:
Then I run the application and it looks like this:
Why isn't there the button / Image anymore? I have no idea!
BTW, the picture is a .png and is saved in the resources!
my wpf code:
<Window x:Class="Chat_App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="1000" WindowStyle="None" AllowsTransparency="True">
<Window.Background>
<RadialGradientBrush>
<GradientStop Color="#FF323A44" Offset="1"/>
<GradientStop Color="#FF384A5A"/>
</RadialGradientBrush>
</Window.Background>
<Grid>
<Border BorderThickness="1" Height="26" VerticalAlignment="Top" Background="#FF436B85" MouseLeftButtonDown="Border_MouseLeftButtonDown">
<Image HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="33" Source="pack://siteoforigin:,,,/Resources/simat_btn_chat.png" MouseLeftButtonDown="Image_MouseLeftButtonDown" Margin="963,2,0,0"/>
</Border>
</Grid>
</Window>
BTW, I tried it with a ico file too!
Thank you!
Remove the verticalAlighment and horizontalAlignment of image and wrap it inside a grid, It should be like this,
<Border BorderThickness="1" Height="26" VerticalAlignment="Top" Background="#FF436B85">
<Grid HorizontalAlignment="Right" Width="24">
<Image Source="Images/download.jpg" Margin="0,0,0,0" d:LayoutOverrides="Width"/>
</Grid>
</Border>
try adding it as a resource (enables reusability too!)
<Window.Resources>
<Image x:Key="MyImage" Source.../>
</Window.Resources>
Then use it in your Grid as:
<Button Content={StaticResource MyImage} />
Also, make sure your image is built as a Resource
EDIT: The button is showing up, but not your image. So it cannot find it properly. Try changing your pack url.
Either like,
Source="pack://application:,,,/Resources/simat_btn_chat.png"
or
Source="/Resources/simat_btn_chat.png"
Related
I have a borderless Window with a Border as root node and Canvas as child.
The canvas is used to draw Polyline by MouseMove.
The border have a DropShadowEffect and this cause a significant drop of performance to draw on Canvas.
I have already seen that some others post suggest to put the Border and Canvas in 2 separate Grid, but this will not work for my case since if I put the Border inside a Grid I lose the shadow effect around the Window.
There is another way to prevent the propagation of the Effect?
This is the xaml code:
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Test"
Height="600" Width="1000"
Background="{x:Null}"
BorderThickness="0"
BorderBrush="Black"
AllowsTransparency="True"
WindowStyle="None">
<WindowChrome.WindowChrome>
<WindowChrome
CaptionHeight="0"
ResizeBorderThickness="5,5,20,20"/>
</WindowChrome.WindowChrome>
<Border x:Name="borderShadow" Margin="0,0,15,15" BorderThickness="2,1" BorderBrush="Black" Background="#FF355870">
<Border.Effect>
<DropShadowEffect Color="Black"
Direction="315"
BlurRadius="15"
ShadowDepth="10"/>
</Border.Effect>
<Grid Background="#FF355870">
<Canvas x:Name="canvasBoard" Background="#00000000" MouseMove="canvasBoard_MouseMove" MouseDown="canvasBoard_MouseDown" MouseUp="canvasBoard_MouseUp"/>
</Grid>
</Border>
</Window>
You can put the Border alone inside a Grid in this way:
<Grid>
<Border x:Name="borderShadow" Margin="0,0,15,15" BorderThickness="2,1" BorderBrush="Black" Background="#FF355870">
<Border.Effect>
<DropShadowEffect Color="Black"
Direction="315"
BlurRadius="15"
ShadowDepth="10"/>
</Border.Effect>
</Border>
<Grid Background="#FF355870">
<Canvas x:Name="canvasBoard" Background="#00000000" MouseMove="canvasBoard_MouseMove" MouseDown="canvasBoard_MouseDown" MouseUp="canvasBoard_MouseUp"/>
</Grid>
</Grid>
I have a project consisting of two pages. One page is having th XAML of a User control developed by me.
The another page has the logic of cropping the image that is present in the image box on that page. I want to use my control on that page and assign the border background of the user control to the image cropped .
The following code is of my UserControl XAML ! The cs file for this page has no code implementation
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" Margin="112,0,108,0">
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="41" Canvas.Top="40" Margin="-40,0,0,0">
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,25,13,97">
<Border.Background>
<ImageBrush x:Name="image1" ImageSource="/Assets/images.jpg" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>
In the user control XAML , we can see that I have set the
to a static image. I want to access this user control to another page and want to assign the element to the cropped image output on the other page. The other page MainPage.Xaml has the code for image cropping.
Any help would be appreciated
I am trying to make a transparent window and on this window I am trying to display small web browser controls that would be nontransparent. I can't get it to work, the web browser control is loading and you can even click the links in the control, but it is not visible... any help is appreciated
<Window ...
Title="HelpView" Height="300" Width="300" WindowStyle="None" AllowsTransparency="True" >
<Window.Background>
<SolidColorBrush Opacity="0.6" Color="Black"/>
</Window.Background>
<Canvas Name="HelpCanvas">
<StackPanel>
<WebBrowser Width="150" Height="150" Source="http://www.msn.com"></WebBrowser>
</StackPanel>
</Canvas>
</Window>
I have gridview with custom usercontrols.
Here's the XAML of the usercontrol:
<UserControl
x:Class="App11.VideoPreview"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App11"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="250"
d:DesignWidth="250">
<Grid>
<Button Height="250" Width="250" Padding="0" BorderThickness="0">
<StackPanel>
<Image Name="image1" Height="250" Width="250" Stretch="None"/>
<Grid Margin="0,-74,0,0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.5">
<GradientStop Color="Black"/>
<GradientStop Color="#FF5B5B5B" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock x:Name="textBox1" TextWrapping="Wrap" FlowDirection="RightToLeft" Foreground="White" Padding="5"/>
</Grid>
</StackPanel>
</Button>
</Grid>
</UserControl>
how can I capture the click event when the button is clicked inside gridview?
I tried GridView_ItemClick, GridView1_SelectionChanged in the .cs of the gridview page
I also tried button_Click in the .cs of the usercontrol page
Both didnt work for me. any idea why?
EDIT:
It did work. I just tried to change frame using Frame.Navigate(typeof(PageName));
I cant change frame from usercontrol, I had to send the current frame to the usercontrol in the build function and then change the frame, like this:
Frame frame;
public VideoPreview(Frame f)
{
this.InitializeComponent();
frame = f;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
frame.Navigate(typeof(PlayVideo));
}
Try to look into MVVM pattern http://www.codeproject.com/Articles/165368/WPF-MVVM-Quick-Start-Tutorial and use Commands instead of events.
<Button Command="{Binding SomeActionCommand}" />
This will make your code much cleaner and reliable.
I'm trying to position a rectangle in the center of a grid with a restricted height, like so:
<Grid ClipToBounds="False">
<Grid Background="LightBlue" Height="10" ClipToBounds="False" Margin="0,27,0,79">
<Rectangle Height="40" Width="20" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center" ClipToBounds="False"/>
</Grid>
</Grid>
I've expected it to look like that:
But instead it looks like that:
I know the my child rectangle is bigger and it is understandable that it clips, however, my ClipToBounds have no effect of anything. After reading around, I found that indeed Grid does not respect "ClipToBounds".
I tried to use Canvas, as suggested in the aforementioned article by Dr.Wpf but I can't seem to get it right.
Is there anything I can do to make it look like the 1st picture, without resorting to C# code?
Thanks!
It's a little hard to tell exactly what your requirements are here. You said you tried it witha Canvas, but you can't seem to get it right. What didn't work?
I used this code:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="TestApp.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="175" Height="170" Background="LightGray">
<Grid>
<Canvas Background="LightBlue" Height="10"
Margin="0,27,0,79" VerticalAlignment="Top">
<Rectangle Height="40" Width="20" Fill="Black"
Canvas.Left="66" Canvas.Top="-15" />
</Canvas>
</Grid>
</Window>
and was able to essentially fake what your screenshot looked like. But (as you can tell by the Canvas.Left and Canvas.Top parts of my code) it is sort of hackish. You could get rid of the Canvas.Left by binding to the ActualWidth of the Canvas and using an IValueConverter that converts it to the correct value.
Edit:
After a little further exploration, I came up with a slightly less hackish way of doing it. Though the nesting kind of makes me cringe, the only thing hardcoded is the top margin to get it centered vertically. Again, that can be done with an IValueConverter, but you don't want that. I'm not sure I can get any better than this, unfortunately.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication10.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid Background="LightBlue" Height="10" ClipToBounds="False" Margin="0,27,0,79">
<Canvas>
<Grid Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}">
<Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 -40 0 0">
<Rectangle Height="40" Width="20" Fill="Black" ClipToBounds="False"/>
</Canvas>
</Grid>
</Canvas>
</Grid>
</Grid>
</Window>