<?xml version="1.0" encoding="ISO-8859-1"?>

<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
	<channel>
		<title><![CDATA[Forum du club des développeurs et IT Pro - GTK+ avec C & C++]]></title>
		<link>https://www.developpez.net/forums/</link>
		<description><![CDATA[Forum d'entraide au développement de logiciels en C ou C++ utilisant GTK+. Avant de poster -> FAQ GTK+]]></description>
		<language>fr</language>
		<lastBuildDate>Sat, 18 Jul 2026 08:12:18 GMT</lastBuildDate>
		<generator>vBulletin</generator>
		<ttl>15</ttl>
		<image>
			<url>https://forum.developpez.be/images/misc/rss.png</url>
			<title><![CDATA[Forum du club des développeurs et IT Pro - GTK+ avec C & C++]]></title>
			<link>https://www.developpez.net/forums/</link>
		</image>
		<item>
			<title><![CDATA[[RESOLU][GTK+3][C] Marges noires et mal centrées]]></title>
			<link>https://www.developpez.net/forums/showthread.php?t=2184200&amp;goto=newpost</link>
			<pubDate>Fri, 12 Jun 2026 15:32:03 GMT</pubDate>
			<description>Bonjour, 
 
 
Je dois...</description>
			<content:encoded><![CDATA[<div>Bonjour,<br />
<br />
<br />
Je dois développer sur Linux Red Hat 8 une IHM en C avec GTK+3. J'en avais fait il y a 25 ans (peut-être pas avec GTK3, en l'occurrence :mrgreen:) donc je me rappelle de la philosophie par contre je n'ai pas retrouvé mon code de l'époque. De toute façon, il est certainement obsolète.<br />
<br />
Pour commencer, j'ai tenté une IHM assez simple : <br />
<ul><li style="">une zone image en haut qui fait toute la largeur</li><li style="">une zone en bas avec un bouton, une scrollbar horizontale et une zone d'édition.</li></ul><br />
<br />
<br />
La largeur de l'image est fournie en paramètre, la marge extérieure aussi. Le reste, ce sont des constantes. Mon code fait des pré-calculs de taille puis créer l'IHM.<br />
<br />
Mon code est le suivant :<br />
<br />
<div class="bbcode_container">
	<div class="bbcode_description">Code:</div>
	<hr /><code class="bbcode_code"><table cellspacing="0" cellpadding="0"><tr><td valign="top" width="40"><div style="border: 1px dashed gray; padding-left: 5px; padding-right: 5px; margin-right: 5px; text-align: right; font-family: monospace">1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br />91<br />92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br />101<br />102<br />103<br />104<br />105<br />106<br />107<br />108<br />109<br />110<br />111<br />112<br />113<br />114<br />115<br />116<br /></div></td><td valign="top"><pre style="margin: 0">&nbsp;
&nbsp;
<span style="color: #339933;">#include</span><span style="color: #FF0000;"> &lt;stdlib.h&gt;</span>
<span style="color: #339933;">#include</span><span style="color: #FF0000;"> &lt;gtk/gtk.h&gt;</span>
&nbsp;
&nbsp;
&nbsp;
<span style="color: #808080;">/* Callback pour le bouton */</span>
<span style="color: #0000ff;">static</span> <span style="color: #0000ff;">void</span> on_button_clicked<span style="color: black;">&#40;</span>GtkButton *button, gpointer data<span style="color: black;">&#41;</span> <span style="color: black;">&#123;</span> printf<span style="color: black;">&#40;</span><span style="color: #FF0000;">&quot;Button clicked<span style="color: #800000;">\n</span>&quot;</span><span style="color: black;">&#41;</span>; <span style="color: black;">&#125;</span>
&nbsp;
<span style="color: #808080;">/* Sch&eacute;ma de l'IHM sur la grille */</span>
&nbsp;
<span style="color: #808080;">/*        0        1            2         3     */</span>
<span style="color: #808080;">/*       _________________________________      */</span>
<span style="color: #808080;">/*   0  |   ___________________________   |  0  */</span>
<span style="color: #808080;">/*      |  |                           |  |     */</span>
<span style="color: #808080;">/*      |  |           zone            |  |     */</span>
<span style="color: #808080;">/*      |  |           image           |  |     */</span>
<span style="color: #808080;">/*      |  |___________________________|  |     */</span>
<span style="color: #808080;">/*   1  |                                 |  1  */</span>
<span style="color: #808080;">/*      |  [Bouton]  &lt;scrollbar&gt;  (Edit)  |     */</span>
<span style="color: #808080;">/*   2  |_________________________________|  2  */</span>
<span style="color: #808080;">/*                                              */</span>
<span style="color: #808080;">/*        0        1            2         3     */</span>
&nbsp;
<span style="color: #0000ff;">static</span> <span style="color: #0000ff;">void</span> IHM_test<span style="color: black;">&#40;</span><span style="color: #0000ff;">int</span> largeur_image, <span style="color: #0000ff;">int</span> marge_externe<span style="color: black;">&#41;</span>
<span style="color: black;">&#123;</span>
    <span style="color: #0000ff;">const</span> <span style="color: #0000ff;">int</span> hauteur_image     = <span style="color: #cc66cc;">480</span>;
    <span style="color: #0000ff;">const</span> <span style="color: #0000ff;">int</span> hauteur_bouton    =  <span style="color: #cc66cc;">40</span>;
    <span style="color: #0000ff;">const</span> <span style="color: #0000ff;">int</span> hauteur_scrollbar =  <span style="color: #cc66cc;">10</span>;
    <span style="color: #0000ff;">const</span> <span style="color: #0000ff;">int</span> hauteur_edit_zone =  <span style="color: #cc66cc;">16</span>;
    <span style="color: #0000ff;">const</span> <span style="color: #0000ff;">int</span> marge_interne     =  <span style="color: #cc66cc;">10</span>;
    <span style="color: #0000ff;">const</span> <span style="color: #0000ff;">int</span> largeur_bouton    =  <span style="color: #cc66cc;">80</span>;
    <span style="color: #0000ff;">const</span> <span style="color: #0000ff;">int</span> largeur_edit_zone = <span style="color: #cc66cc;">120</span>;
    <span style="color: #0000ff;">const</span> <span style="color: #0000ff;">int</span> largeur_scrol_min = <span style="color: #cc66cc;">200</span>;
    <span style="color: #0000ff;">int</span> largeur_fenetre, hauteur_fenetre, hauteur_ligne_2, largeur_scrollbar;
&nbsp;
    <span style="color: #808080;">/* hauteur ligne 2 */</span>
    hauteur_ligne_2 = hauteur_bouton;
    <span style="color: #0000ff;">if</span> <span style="color: black;">&#40;</span>hauteur_ligne_2 &lt; hauteur_scrollbar<span style="color: black;">&#41;</span>
        hauteur_ligne_2 = hauteur_scrollbar;
    <span style="color: #0000ff;">if</span> <span style="color: black;">&#40;</span>hauteur_ligne_2 &lt; hauteur_edit_zone<span style="color: black;">&#41;</span>
        hauteur_ligne_2 = hauteur_edit_zone;
&nbsp;
    <span style="color: #808080;">/* Largeur scrollbar : entre bouton et edit zone + marges internes */</span>
    largeur_scrollbar = largeur_image - <span style="color: black;">&#40;</span>marge_interne * <span style="color: #cc66cc;">2</span><span style="color: black;">&#41;</span> - <span style="color: black;">&#40;</span>largeur_bouton + largeur_edit_zone<span style="color: black;">&#41;</span>;
    <span style="color: #0000ff;">if</span> <span style="color: black;">&#40;</span>largeur_scrollbar &lt; largeur_scrol_min<span style="color: black;">&#41;</span> <span style="color: #808080;">/* si trop petit : on agrandit tout */</span>
    <span style="color: black;">&#123;</span>
        largeur_scrollbar = largeur_scrol_min;
        largeur_image = largeur_bouton + largeur_edit_zone + largeur_scrol_min + <span style="color: black;">&#40;</span>marge_interne * <span style="color: #cc66cc;">2</span><span style="color: black;">&#41;</span>;
    <span style="color: black;">&#125;</span>
&nbsp;
    <span style="color: #808080;">/* Dimensions fen&ecirc;tre */</span>
    largeur_fenetre = largeur_image + <span style="color: black;">&#40;</span>marge_externe * <span style="color: #cc66cc;">2</span><span style="color: black;">&#41;</span>;
    hauteur_fenetre = hauteur_image + hauteur_ligne_2 + marge_interne + <span style="color: black;">&#40;</span>marge_externe * <span style="color: #cc66cc;">2</span><span style="color: black;">&#41;</span>;
&nbsp;
    <span style="color: #808080;">/* Cr&eacute;ation d&#146;une fen&ecirc;tre */</span>
    GtkWidget * fenetre = gtk_window_new<span style="color: black;">&#40;</span>GTK_WINDOW_TOPLEVEL<span style="color: black;">&#41;</span>;
    gtk_window_set_title<span style="color: black;">&#40;</span>GTK_WINDOW<span style="color: black;">&#40;</span>fenetre<span style="color: black;">&#41;</span>, <span style="color: #FF0000;">&quot;Ma fen&ecirc;tre&quot;</span><span style="color: black;">&#41;</span>;
    gtk_window_set_default_size<span style="color: black;">&#40;</span>GTK_WINDOW<span style="color: black;">&#40;</span>fenetre<span style="color: black;">&#41;</span>, largeur_fenetre, hauteur_fenetre<span style="color: black;">&#41;</span>;
    gtk_widget_set_margin_start<span style="color: black;">&#40;</span>fenetre, marge_externe<span style="color: black;">&#41;</span>;
    gtk_widget_set_margin_end<span style="color: black;">&#40;</span>fenetre, marge_externe<span style="color: black;">&#41;</span>;
    gtk_widget_set_margin_top<span style="color: black;">&#40;</span>fenetre, marge_externe<span style="color: black;">&#41;</span>;
    gtk_widget_set_margin_bottom<span style="color: black;">&#40;</span>fenetre, marge_externe<span style="color: black;">&#41;</span>;
    g_signal_connect<span style="color: black;">&#40;</span>fenetre, <span style="color: #FF0000;">&quot;destroy&quot;</span>, G_CALLBACK<span style="color: black;">&#40;</span>gtk_main_quit<span style="color: black;">&#41;</span>, <span style="color: #0080ff;">NULL</span><span style="color: black;">&#41;</span>;
&nbsp;
    <span style="color: #808080;">// Cr&eacute;ation de la grille : ligne et colonnes non homog&egrave;nes, avec des marges</span>
    GtkWidget * grille = gtk_grid_new<span style="color: black;">&#40;</span><span style="color: black;">&#41;</span>;
    gtk_grid_set_row_spacing<span style="color: black;">&#40;</span>GTK_GRID<span style="color: black;">&#40;</span>grille<span style="color: black;">&#41;</span>, marge_interne<span style="color: black;">&#41;</span>;
    gtk_grid_set_column_spacing<span style="color: black;">&#40;</span>GTK_GRID<span style="color: black;">&#40;</span>grille<span style="color: black;">&#41;</span>, marge_interne<span style="color: black;">&#41;</span>;
    gtk_grid_set_row_homogeneous<span style="color: black;">&#40;</span>GTK_GRID<span style="color: black;">&#40;</span>grille<span style="color: black;">&#41;</span>, <span style="color: #0080ff;">FALSE</span><span style="color: black;">&#41;</span>;
    gtk_grid_set_column_homogeneous<span style="color: black;">&#40;</span>GTK_GRID<span style="color: black;">&#40;</span>grille<span style="color: black;">&#41;</span>, <span style="color: #0080ff;">FALSE</span><span style="color: black;">&#41;</span>;
    gtk_container_add<span style="color: black;">&#40;</span>GTK_CONTAINER<span style="color: black;">&#40;</span>fenetre<span style="color: black;">&#41;</span>, grille<span style="color: black;">&#41;</span>;
&nbsp;
    <span style="color: #808080;">// Zone de l'image (avec cadre autour) : d&eacute;bute en (0,0) sur la grille, occupe 3x1</span>
    GtkWidget * cadre = gtk_frame_new<span style="color: black;">&#40;</span><span style="color: #FF0000;">&quot;&quot;</span><span style="color: black;">&#41;</span>;
    gtk_frame_set_shadow_type<span style="color: black;">&#40;</span>GTK_FRAME<span style="color: black;">&#40;</span>cadre<span style="color: black;">&#41;</span>, GTK_SHADOW_ETCHED_IN<span style="color: black;">&#41;</span>;
    GtkWidget * zone_image = gtk_drawing_area_new<span style="color: black;">&#40;</span><span style="color: black;">&#41;</span>;
    gtk_widget_set_size_request<span style="color: black;">&#40;</span>zone_image, largeur_image, hauteur_image<span style="color: black;">&#41;</span>;
    gtk_container_add<span style="color: black;">&#40;</span>GTK_CONTAINER<span style="color: black;">&#40;</span>cadre<span style="color: black;">&#41;</span>, zone_image<span style="color: black;">&#41;</span>;
    gtk_grid_attach<span style="color: black;">&#40;</span>GTK_GRID<span style="color: black;">&#40;</span>grille<span style="color: black;">&#41;</span>, cadre, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">3</span>, <span style="color: #cc66cc;">1</span><span style="color: black;">&#41;</span>;  <span style="color: #808080;">// Ligne 0</span>
&nbsp;
    <span style="color: #808080;">// Bouton &agrave; gauche : d&eacute;bute en (0,1) sur la grille, occupe 1x1</span>
    GtkWidget * bouton = gtk_button_new_with_label<span style="color: black;">&#40;</span><span style="color: #FF0000;">&quot;OK&quot;</span><span style="color: black;">&#41;</span>;
    gtk_widget_set_size_request<span style="color: black;">&#40;</span>bouton, largeur_bouton, hauteur_bouton<span style="color: black;">&#41;</span>;
    gtk_grid_attach<span style="color: black;">&#40;</span>GTK_GRID<span style="color: black;">&#40;</span>grille<span style="color: black;">&#41;</span>, bouton, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span><span style="color: black;">&#41;</span>;
    g_signal_connect<span style="color: black;">&#40;</span>bouton, <span style="color: #FF0000;">&quot;clicked&quot;</span>, G_CALLBACK<span style="color: black;">&#40;</span>on_button_clicked<span style="color: black;">&#41;</span>, <span style="color: #0080ff;">NULL</span><span style="color: black;">&#41;</span>;
&nbsp;
    <span style="color: #808080;">// Scrollbar au milieu : d&eacute;bute en (1,1) sur la grille, occupe 1x1</span>
    GtkAdjustment * ajustement = gtk_adjustment_new<span style="color: black;">&#40;</span><span style="color: #cc66cc;">50.0</span>, <span style="color: #cc66cc;">0.0</span>, <span style="color: #cc66cc;">105.0</span>, <span style="color: #cc66cc;">1.0</span>, <span style="color: #cc66cc;">10.0</span>, <span style="color: #cc66cc;">5.0</span><span style="color: black;">&#41;</span>;
    GtkWidget * scrollbar = gtk_scrollbar_new<span style="color: black;">&#40;</span>GTK_ORIENTATION_HORIZONTAL, ajustement<span style="color: black;">&#41;</span>;
    g_object_set<span style="color: black;">&#40;</span>scrollbar, <span style="color: #FF0000;">&quot;hexpand&quot;</span>, <span style="color: #0080ff;">TRUE</span>, <span style="color: #0080ff;">NULL</span><span style="color: black;">&#41;</span>;
    g_object_set<span style="color: black;">&#40;</span>scrollbar, <span style="color: #FF0000;">&quot;vexpand&quot;</span>, <span style="color: #0080ff;">FALSE</span>, <span style="color: #0080ff;">NULL</span><span style="color: black;">&#41;</span>;
    g_object_set<span style="color: black;">&#40;</span>scrollbar, <span style="color: #FF0000;">&quot;valign&quot;</span>, GTK_ALIGN_CENTER, <span style="color: #0080ff;">NULL</span><span style="color: black;">&#41;</span>;
    gtk_widget_set_size_request<span style="color: black;">&#40;</span>scrollbar, largeur_scrollbar, hauteur_scrollbar<span style="color: black;">&#41;</span>;
    gtk_grid_attach<span style="color: black;">&#40;</span>GTK_GRID<span style="color: black;">&#40;</span>grille<span style="color: black;">&#41;</span>, scrollbar, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span><span style="color: black;">&#41;</span>;
&nbsp;
    <span style="color: #808080;">// Edit zone &agrave; droite : d&eacute;bute en (2,1) sur la grille, occupe 1x1</span>
    GtkWidget * edit_zone = gtk_entry_new_with_buffer<span style="color: black;">&#40;</span><span style="color: black;">&#40;</span>GtkEntryBuffer *<span style="color: black;">&#41;</span> gtk_entry_buffer_new<span style="color: black;">&#40;</span><span style="color: #FF0000;">&quot;Valeur&quot;</span>, <span style="color: #cc66cc;">-1</span><span style="color: black;">&#41;</span><span style="color: black;">&#41;</span>;
    gtk_widget_set_size_request<span style="color: black;">&#40;</span>edit_zone, largeur_edit_zone, hauteur_edit_zone<span style="color: black;">&#41;</span>;
    gtk_grid_attach<span style="color: black;">&#40;</span>GTK_GRID<span style="color: black;">&#40;</span>grille<span style="color: black;">&#41;</span>, edit_zone, <span style="color: #cc66cc;">2</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span>, <span style="color: #cc66cc;">1</span><span style="color: black;">&#41;</span>;  <span style="color: #808080;">// Ligne 2</span>
&nbsp;
    <span style="color: #808080;">// Affichage de tous les widgets</span>
    gtk_widget_show_all<span style="color: black;">&#40;</span>fenetre<span style="color: black;">&#41;</span>;
&nbsp;
<span style="color: black;">&#125;</span>
&nbsp;
&nbsp;
<span style="color: #0000ff;">int</span> main<span style="color: black;">&#40;</span><span style="color: #0000ff;">int</span> argc, <span style="color: #0000ff;">char</span> **argv<span style="color: black;">&#41;</span>
<span style="color: black;">&#123;</span>
    gtk_init<span style="color: black;">&#40;</span>&amp;argc, &amp;argv<span style="color: black;">&#41;</span>;
    IHM_test<span style="color: black;">&#40;</span><span style="color: #cc66cc;">640</span>, <span style="color: #cc66cc;">40</span><span style="color: black;">&#41;</span>;
    IHM_test<span style="color: black;">&#40;</span><span style="color: #cc66cc;">640</span>, <span style="color: #cc66cc;">20</span><span style="color: black;">&#41;</span>;
    gtk_main<span style="color: black;">&#40;</span><span style="color: black;">&#41;</span>;
    <span style="color: #0000ff;">return</span> <span style="color: #cc66cc;">0</span>;
<span style="color: black;">&#125;</span></pre></td></tr></table></code><hr />
</div>Comme c'était bizarre, j'ai fait des essais en mettant deux marges externes différentes. Ça donne les rendus suivants (avec les tailles) :<br />
<br />
<img src="https://www.developpez.net/forums/attachments/p676917d1781277897/c-cpp/bibliotheques/gtkp/gtkp-c-cpp/resolu-gtkp3-c-marges-noires-mal-centrees/marge_20.png/" border="0" alt="Nom : Marge_20.png
Affichages : 96
Taille : 31,7 Ko"  style="float: CONFIG" />  <img src="https://www.developpez.net/forums/attachments/p676918d1781277918/c-cpp/bibliotheques/gtkp/gtkp-c-cpp/resolu-gtkp3-c-marges-noires-mal-centrees/marge_40.png/" border="0" alt="Nom : Marge_40.png
Affichages : 102
Taille : 30,8 Ko"  style="float: CONFIG" /><br />
<br />
On constate que non seulement les marges qui auraient dû être en haut et à gauche se sont cumulées à droite et en bas mais en plus, elles sont complètement noires. A noter que les largeurs de la zone image et de la zone d'édition ont aussi 40 pixels de trop. Et je ne parle pas de la tête de ma scrollbar dont l'apparence est plus que suspecte, mais je verrai ça plus tard.<br />
<br />
Quelqu'un aurait-il une idée de ce qui cloche ? Aurais-je raté quelque chose ?<br />
<br />
Merci d'avance et bonne soirée.<br />
<br />
-- <br />
Olivier</div>


	<div style="padding:10px">

	

	
		<fieldset class="fieldset">
			<legend>Images attachées</legend>
				<div style="padding:10px">
				<img class="attach" src="https://www.developpez.net/forums/attachments/p676917d1781277897/c-cpp/bibliotheques/gtkp/gtkp-c-cpp/resolu-gtkp3-c-marges-noires-mal-centrees/marge_20.png/" alt="" />&nbsp;<img class="attach" src="https://www.developpez.net/forums/attachments/p676918d1781277918/c-cpp/bibliotheques/gtkp/gtkp-c-cpp/resolu-gtkp3-c-marges-noires-mal-centrees/marge_40.png/" alt="" />&nbsp;
			</div>
		</fieldset>
	

	

	

	</div>
]]></content:encoded>
			<category domain="https://www.developpez.net/forums/f377/c-cpp/bibliotheques/gtkp/gtkp-c-cpp/"><![CDATA[GTK+ avec C & C++]]></category>
			<dc:creator>olivier_u</dc:creator>
			<guid isPermaLink="true">https://www.developpez.net/forums/d2184200/c-cpp/bibliotheques/gtkp/gtkp-c-cpp/resolu-gtkp3-c-marges-noires-mal-centrees/</guid>
		</item>
	</channel>
</rss>
