locked
Adding a background to WPF RRS feed

  • Question

  • Hi,

    I am new to WPF. I am trying to add a background to my WPF  form,but I recive this error when I hit run.

    I am migrating from WinForms,and I find WPF really hard to work with.Is there any chance for me to add images/background/textbox/buttons to WPF like I did in WinForms?

    Thank you! 

    Why can't I upload images?


    https://www.dropbox.com/s/82r67gle52civt9/eroare.png?dl=0


    Saturday, July 25, 2015 3:30 PM

Answers

  • You have to specify the image location.
    <Window.Background>
            <ImageBrush ImageSource="C:\Users\Images\image.png">
            </ImageBrush>
    </Window.Background>

    Saturday, July 25, 2015 4:24 PM
  • Just add the "simple-backgrounds-33.JPEG" file to the root folder of your project in Visual Studio: Project->Add Existing Item.

    Then the following markup should work provided that the actual name of the image that was added to the project is "simple-backgrounds-33.jpg":

        <Window.Background>
            <ImageBrush ImageSource="simple-backgrounds-33.jpg"/>
        </Window.Background>

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Monday, July 27, 2015 2:37 PM

All replies

  • You have to specify the image location.
    <Window.Background>
            <ImageBrush ImageSource="C:\Users\Images\image.png">
            </ImageBrush>
    </Window.Background>

    Saturday, July 25, 2015 4:24 PM
  • Hi Bogdan,

    >>”Is there any chance for me to add images/background/textbox/buttons to WPF like I did in WinForms?”

    In my experience, you could specify absolute path for your imagebrush like MH58’s reply. You could also add your images in your project as resource, then you could use it. You could refer to this thread “Background Image in WPF”: https://social.msdn.microsoft.com/Forums/vstudio/en-US/d1973a37-f48c-46c9-9363-d1f16fdcb667/background-image-in-wpf?forum=wpf

    And if you want to learn WPF, I have found some information about “Introduction to WPF”, you could refer to this document for details: https://msdn.microsoft.com/en-us/library/vstudio/aa970268(v=vs.100).aspx

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, July 27, 2015 6:54 AM
  • I wouldn't use absolute paths for images.

    When you distribute your app, that isn't going to work.

    Drag your picture over into the project in the solution explorer.

    It will probably be set to Resource.

    Say it's called park002.jpg like mine.

    You can use relative paths like:

        <Window.Background>
            <ImageBrush ImageSource="/park002.JPG"/>
        </Window.Background>

    If you want it a bit subtler, you can alter opacity.

        <Window.Background>
            <ImageBrush ImageSource="/park002.JPG" Opacity="0.4"/>
        </Window.Background>

    For Buttons and the like where you want something you might call an icon, you should consider using a path. This scales very well, will be very lightweight and is the best way to do the "flat" sort of icons that users expect nowadays.

    You can get such paths from various sources but the one I use mostly is syncfusion metro studio.

    You can put all your "icons" in a resource dictionary, merge it using app.xaml and then bind the path in buttons.

     Here's a resource dictionary.

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      
                        >
    
        <SolidColorBrush x:Key="PossibleErrorBrush" Color="White" />
        <SolidColorBrush x:Key="PossibleErrorOKBrush" Color="White" />
        <SolidColorBrush x:Key="PossibleErrorBadBrush" Color="Red" />
        
        <Geometry x:Key="eMailIcon">M0,8.5909986L28.326799,29.197784C32.25,32.373585,35.237099,29.385284,35.237099,29.385284L64,8.5909986 64,47.064999 0,47.064999z M0,0L63.875,0 63.875,3.7343616 32.872349,26.146971C32.872349,26.146971,31.87495,27.018066,31.127552,26.271971L0,3.4856424z</Geometry>
        <Geometry x:Key="Cogs">M18.660349,20.393C14.879011,20.393 11.806,23.468643 11.806,27.249899 11.806,31.026154 14.879011,34.103001 18.660349,34.103001 22.444386,34.103001 25.519998,31.026154 25.519998,27.249899 25.519998,23.468643 22.444386,20.393 18.660349,20.393z M50.07317,8.7561953C49.408178,8.7706149 48.735172,8.9156297 48.090648,9.2053407 45.51765,10.359123 44.36155,13.394207 45.51765,15.96858 46.671449,18.541552 49.709146,19.691384 52.283444,18.540251 54.856342,17.378819 56.012442,14.352736 54.856342,11.771862 53.990993,9.8450501 52.068145,8.7129386 50.07317,8.7561953z M15.597473,8.6000007L21.868224,8.6000007 22.20032,14.327933 22.20032,14.531032C23.236712,14.816134,24.218506,15.221134,25.133898,15.736836L25.253695,15.615635 29.675461,11.900828 34.111725,16.338337 30.296556,20.624846 30.165057,20.758946C30.683352,21.674349,31.08955,22.659951,31.378649,23.696451L31.544045,23.696451 37.293999,24.196451 37.293999,30.468565 31.566147,30.803267 31.378649,30.803267C31.08955,31.836972,30.683352,32.821373,30.165057,33.736874L30.280955,33.853974 33.993225,38.274582 29.558261,42.709496 25.271895,38.896988 25.133898,38.758988C24.218506,39.274586,23.236712,39.678185,22.20032,39.963387L22.20032,40.146988 21.868224,45.897 15.597473,45.897 15.093578,40.166485 15.093578,39.959488C14.064985,39.671688,13.084595,39.265385,12.174301,38.749787L12.040102,38.881485 7.7381763,42.709496 3.3033104,38.274582 6.9999428,33.869675 7.1522102,33.721176C6.6379356,32.807072,6.2343292,31.83057,5.9464817,30.803267L5.7499523,30.803267 0,30.468565 0,24.196451 5.7278118,23.696451 5.9464817,23.696451C6.2343292,22.665051,6.6379356,21.687248,7.1522102,20.775946L7.0128822,20.640444 3.1874237,16.338337 7.6209869,11.900828 12.027203,15.600036 12.174301,15.744536C13.084595,15.231535,14.064985,14.825334,15.093578,14.537533L15.093578,14.350033z M52.888157,0L57.259197,1.6601361 56.091211,5.7941664 56.035212,5.937414C56.665401,6.3971274,57.240894,6.9413698,57.753986,7.5533617L57.878984,7.4947021 61.949226,6.0845716 63.865797,10.35405 60.071657,12.331821 59.933659,12.393021C60.053354,13.18731,60.075457,13.977598,60.003952,14.758987L60.12245,14.803286 63.999998,16.682059 62.337223,21.053194 58.253977,19.771912 58.12108,19.721113C57.656389,20.352705,57.112095,20.928097,56.496105,21.441189L56.549604,21.556988 57.962284,25.627228 53.691446,27.541302 51.712375,23.744456 51.653774,23.615557C50.862186,23.736756,50.066597,23.760056,49.285309,23.687157L49.241009,23.800455 47.366036,27.678 42.991099,26.017823 44.277584,21.928082 44.325682,21.799183C43.696789,21.334391,43.121297,20.784899,42.607106,20.171606L42.487208,20.225006 38.469066,21.753483 36.553693,17.486847 40.297138,15.390477 40.441637,15.327978C40.321941,14.53499,40.299839,13.744601,40.372736,12.963413L40.24384,12.915114 36.321998,11.158738 37.984774,6.7851217 42.113513,7.9530752 42.263212,8.009104C42.728206,7.3840535,43.269797,6.8124616,43.879186,6.3033789L43.82189,6.1652506 42.29051,2.1496897 46.562749,0.22918414 48.656518,3.977782 48.722916,4.1289099C49.511906,4.0091622,50.299695,3.9843827,51.075585,4.0534113L51.127785,3.9218233z</Geometry>
        <SolidColorBrush x:Key="DarkForecolourBrush" Color="MidnightBlue" />
        <Color x:Key="DarkForecolour">#FF191970</Color>
        <Color x:Key="DarkBackcolour">#4682B4</Color>
        <Color x:Key="LightBackcolour">#6495ED</Color>
    
    
        <SolidColorBrush x:Key="DarkDullBrush" Color="#FF191970" />
        <Color x:Key="DarkDull">#FF191970</Color>
    
        <SolidColorBrush x:Key="MidDullBrush" Color="#FF707078" />
        <Color x:Key="MidDull">#FF707078</Color>
    
        <SolidColorBrush x:Key="LightDullBrush" Color="#FFCDCDDA" />
        <Color x:Key="LightDull">#FFCDCDDA</Color>
    
        <SolidColorBrush x:Key="DarkBrightBrush" Color="#FF831404" />
        <Color x:Key="DarkBright">#FF831404</Color>
    
        <SolidColorBrush x:Key="MidBrightBrush" Color="#FFE74804" />
        <Color x:Key="MidBright">#FFE74804</Color>
    
        <SolidColorBrush x:Key="JustBrightBrush" Color="#EE8232" />
        <Color x:Key="JustBright">#EE8232</Color>
    
        <SolidColorBrush x:Key="LightBrightBrush" Color="#FFFAB019" />
        <Color x:Key="LightBright">#FFFAB019</Color>
    
        <SolidColorBrush x:Key="VeryLightBrightBrush" Color="#FFFAE175" />
        <Color x:Key="VeryLightBright">#FFFAE175</Color>
    
        <SolidColorBrush x:Key="BrightRedBrush" Color="Red" />
        <SolidColorBrush x:Key="BrightAmberBrush" Color="#FFFFC500" />
        <SolidColorBrush x:Key="BrightGreenBrush" Color="Green" />
    
        <RadialGradientBrush  x:Key="LightBrightGradientBrush"
              GradientOrigin="0.5,0.5"  Center="0.5,0.5"
              RadiusX="0.5" RadiusY="0.5">
            <RadialGradientBrush.GradientStops>
                <GradientStop Color="{StaticResource VeryLightBright}" Offset="0" />
                <GradientStop Color="{StaticResource LightBright}" Offset="0.75" />
                <GradientStop Color="{StaticResource JustBright}" Offset="1" />
            </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
    
        <Style TargetType="{x:Type Window}">
            <Setter Property="FontSize" Value="12"/>
            <!--<Setter Property="FontFamily" Value="Symbol"/>-->
            <Setter Property="FontFamily" Value="Segoe UI"/>
        </Style>
    </ResourceDictionary>

    merged by app.xaml

    <Application x:Class="WPF_Layout.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 StartupUri="Layout1.xaml">
        <Application.Resources>
            <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources1.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    </Application>

    and here's a button

                <Button  Command="{Binding ShowLayout2}"
                         Background="{StaticResource ResourceKey=LightBrightGradientBrush}">
                    <Grid>
                        <Path Data="{StaticResource eMailIcon}"
                                                  Stretch="Uniform" Fill="{StaticResource MidDullBrush}" Width="20" Height="20" RenderTransformOrigin="0.5,0.5">
                        </Path>
                    </Grid>
                </Button>

    WPF is not windows forms.

    It is a totally different technology.

    You "buy in" to binding and resources etc or you will constantly be wondering why anyone ever uses WPF. 


    Monday, July 27, 2015 8:00 AM
  • Just add the "simple-backgrounds-33.JPEG" file to the root folder of your project in Visual Studio: Project->Add Existing Item.

    Then the following markup should work provided that the actual name of the image that was added to the project is "simple-backgrounds-33.jpg":

        <Window.Background>
            <ImageBrush ImageSource="simple-backgrounds-33.jpg"/>
        </Window.Background>

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    Monday, July 27, 2015 2:37 PM